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,12 +1,12 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { GridList, Icon, IconButton, Badge, Label, Checkbox, Prop, PropsList } from '../../../app-typescript';
3
+ import {GridList, Icon, IconButton, Badge, Label, Checkbox, Prop, PropsList} from '../../../app-typescript';
4
4
  import * as GridElements from '../../../app-typescript/components/GridItem';
5
5
 
6
6
  interface IState {
7
- selected: boolean,
8
- locked: boolean,
9
- status: Array<string>
7
+ selected: boolean;
8
+ locked: boolean;
9
+ status: Array<string>;
10
10
  }
11
11
 
12
12
  export default class GridItemDoc extends React.Component<{}, IState> {
@@ -15,7 +15,7 @@ export default class GridItemDoc extends React.Component<{}, IState> {
15
15
  this.state = {
16
16
  selected: true,
17
17
  locked: false,
18
- status: ['selected']
18
+ status: ['selected'],
19
19
  };
20
20
  }
21
21
 
@@ -30,13 +30,14 @@ export default class GridItemDoc extends React.Component<{}, IState> {
30
30
 
31
31
  this.setState({status: statuses});
32
32
  }
33
-
33
+
34
34
  render() {
35
35
  return (
36
- <section className='docs-page__container'>
37
- <h2 className='docs-page__h2'>GridItem</h2>
38
-
39
- <Markup.ReactMarkupCodePreview>{`
36
+ <section className="docs-page__container">
37
+ <h2 className="docs-page__h2">GridItem</h2>
38
+
39
+ <Markup.ReactMarkupCodePreview>
40
+ {`
40
41
  <GridElements.GridItem itemtype='photo'>
41
42
  <GridElements.GridItemMedia>...</GridElements.GridItemMedia>
42
43
  <GridElements.GridItemContent>
@@ -56,9 +57,11 @@ export default class GridItemDoc extends React.Component<{}, IState> {
56
57
  `}
57
58
  </Markup.ReactMarkupCodePreview>
58
59
 
59
- <p className="docs-page__paragraph">The <code>GridItem</code> is a complex container component intended for the display of content items in a grid structure.
60
- Although it can be used as a standalone element, it works best as a child of the <code>GridList</code> component. If used without the <code>GridList</code> it should
61
- be placed in an element with a constrained width, as it doesn't have a limited width on its own.
60
+ <p className="docs-page__paragraph">
61
+ The <code>GridItem</code> is a complex container component intended for the display of content items
62
+ in a grid structure. Although it can be used as a standalone element, it works best as a child of
63
+ the <code>GridList</code> component. If used without the <code>GridList</code> it should be placed
64
+ in an element with a constrained width, as it doesn't have a limited width on its own.
62
65
  </p>
63
66
 
64
67
  <h3 className="docs-page__h3 docs-page__h3--small-top-m">Full structure</h3>
@@ -66,129 +69,169 @@ export default class GridItemDoc extends React.Component<{}, IState> {
66
69
  <Markup.ReactMarkup>
67
70
  <Markup.ReactMarkupPreview>
68
71
  <GridList size="small" gap="medium" margin="1">
69
- <GridElements.GridItem itemtype='photo' status={this.state.status} onClick={()=> false}>
72
+ <GridElements.GridItem itemtype="photo" status={this.state.status} onClick={() => false}>
70
73
  <GridElements.GridItemCheckWrapper>
71
- <Checkbox checked={this.state.selected} label={{text:''}} onChange={(value) => {
74
+ <Checkbox
75
+ checked={this.state.selected}
76
+ label={{text: ''}}
77
+ onChange={(value) => {
72
78
  this.setState({selected: value});
73
79
  this.changeStatus('selected');
74
- }} />
80
+ }}
81
+ />
75
82
  </GridElements.GridItemCheckWrapper>
76
83
  <GridElements.GridItemTopActions>
77
- <IconButton icon='fullscreen' ariaValue='Fullscreen preview' onClick={()=> false} />
84
+ <IconButton
85
+ icon="fullscreen"
86
+ ariaValue="Fullscreen preview"
87
+ onClick={() => false}
88
+ />
78
89
  </GridElements.GridItemTopActions>
79
90
  <GridElements.GridItemMedia>
80
91
  <img src="/bill.jpg" alt="Bill" />
81
92
  </GridElements.GridItemMedia>
82
93
  <GridElements.GridItemContent>
83
- <GridElements.GridItemTime time='10.11.2020' />
84
- <GridElements.GridItemTitle>Item title nulla vitae elit libero, a pharetra augue</GridElements.GridItemTitle>
85
- <GridElements.GridItemText>Item description cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet...</GridElements.GridItemText>
94
+ <GridElements.GridItemTime time="10.11.2020" />
95
+ <GridElements.GridItemTitle>
96
+ Item title nulla vitae elit libero, a pharetra augue
97
+ </GridElements.GridItemTitle>
98
+ <GridElements.GridItemText>
99
+ Item description cras mattis consectetur purus sit amet fermentum. Vivamus
100
+ sagittis lacus vel augue laoreet...
101
+ </GridElements.GridItemText>
86
102
  </GridElements.GridItemContent>
87
103
  <GridElements.GridItemFooter>
88
- <GridElements.GridItemFooterBlock align='left'>
89
- <Icon name='photo' className='sd-grid-item__type-icn' />
90
- <Badge text='2' color='deep-orange--500' />
91
- <Badge text='5' shape='square' color='blue-grey--300' />
104
+ <GridElements.GridItemFooterBlock align="left">
105
+ <Icon name="photo" className="sd-grid-item__type-icn" />
106
+ <Badge text="2" color="deep-orange--500" />
107
+ <Badge text="5" shape="square" color="blue-grey--300" />
92
108
  </GridElements.GridItemFooterBlock>
93
109
  <GridElements.GridItemFooterActions>
94
- <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
110
+ <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
95
111
  </GridElements.GridItemFooterActions>
96
112
  </GridElements.GridItemFooter>
97
113
  </GridElements.GridItem>
98
114
 
99
- <GridElements.GridItem itemtype='audio' locked={true} fetched={true} onClick={()=> false}>
115
+ <GridElements.GridItem itemtype="audio" locked={true} fetched={true} onClick={() => false}>
100
116
  <GridElements.GridItemTopActions>
101
- <IconButton icon='play' ariaValue='Play' onClick={()=> false} />
117
+ <IconButton icon="play" ariaValue="Play" onClick={() => false} />
102
118
  </GridElements.GridItemTopActions>
103
119
  <GridElements.GridItemMedia></GridElements.GridItemMedia>
104
120
  <GridElements.GridItemContent>
105
- <GridElements.GridItemTime time='10.11.2020' />
106
- <GridElements.GridItemTitle>Maecenas faucibus mollis interdum</GridElements.GridItemTitle>
107
- <GridElements.GridItemText>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis...</GridElements.GridItemText>
121
+ <GridElements.GridItemTime time="10.11.2020" />
122
+ <GridElements.GridItemTitle>
123
+ Maecenas faucibus mollis interdum
124
+ </GridElements.GridItemTitle>
125
+ <GridElements.GridItemText>
126
+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
127
+ Sed posuere consectetur est at lobortis...
128
+ </GridElements.GridItemText>
108
129
  </GridElements.GridItemContent>
109
130
  <GridElements.GridItemFooter>
110
- <GridElements.GridItemFooterBlock align='left'>
111
- <Icon name='audio' className='sd-grid-item__type-icn' />
112
- <Badge text='1' color='deep-orange--600' />
113
- <Badge text='4' shape='square' color='blue-grey--500' />
131
+ <GridElements.GridItemFooterBlock align="left">
132
+ <Icon name="audio" className="sd-grid-item__type-icn" />
133
+ <Badge text="1" color="deep-orange--600" />
134
+ <Badge text="4" shape="square" color="blue-grey--500" />
114
135
  </GridElements.GridItemFooterBlock>
115
136
  <GridElements.GridItemFooterActions>
116
- <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
137
+ <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
117
138
  </GridElements.GridItemFooterActions>
118
139
  </GridElements.GridItemFooter>
119
140
  </GridElements.GridItem>
120
141
 
121
- <GridElements.GridItem itemtype='photo'>
142
+ <GridElements.GridItem itemtype="photo">
122
143
  <GridElements.GridItemTopActions>
123
- <IconButton icon='fullscreen' ariaValue='Fullscreen preview' onClick={()=> false} />
144
+ <IconButton
145
+ icon="fullscreen"
146
+ ariaValue="Fullscreen preview"
147
+ onClick={() => false}
148
+ />
124
149
  </GridElements.GridItemTopActions>
125
150
  <GridElements.GridItemMedia>
126
151
  <img src="/obama_2.jpg" alt="Barack" />
127
152
  </GridElements.GridItemMedia>
128
153
  <GridElements.GridItemContent>
129
- <GridElements.GridItemTime time='10.11.2020' />
130
- <GridElements.GridItemTitle>Fusce dapibus, tellus ac cursus commodo, tortor mauris</GridElements.GridItemTitle>
131
- <GridElements.GridItemText>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna...</GridElements.GridItemText>
154
+ <GridElements.GridItemTime time="10.11.2020" />
155
+ <GridElements.GridItemTitle>
156
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris
157
+ </GridElements.GridItemTitle>
158
+ <GridElements.GridItemText>
159
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam
160
+ eget risus varius blandit sit amet non magna...
161
+ </GridElements.GridItemText>
132
162
  </GridElements.GridItemContent>
133
163
  <GridElements.GridItemFooter>
134
- <GridElements.GridItemFooterBlock align='left'>
135
- <Icon name='photo' className='sd-grid-item__type-icn' />
136
- <Badge text='3' color='orange--500' />
137
- <Badge text='5' shape='square' color='blue-grey--300' />
164
+ <GridElements.GridItemFooterBlock align="left">
165
+ <Icon name="photo" className="sd-grid-item__type-icn" />
166
+ <Badge text="3" color="orange--500" />
167
+ <Badge text="5" shape="square" color="blue-grey--300" />
138
168
  </GridElements.GridItemFooterBlock>
139
169
  <GridElements.GridItemFooterActions>
140
- <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
170
+ <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
141
171
  </GridElements.GridItemFooterActions>
142
172
  </GridElements.GridItemFooter>
143
173
  </GridElements.GridItem>
144
174
 
145
- <GridElements.GridItem itemtype='photo' status={['actioning']}>
175
+ <GridElements.GridItem itemtype="photo" status={['actioning']}>
146
176
  <GridElements.GridItemTopActions>
147
- <IconButton icon='fullscreen' ariaValue='Fullscreen preview' onClick={()=> false} />
177
+ <IconButton
178
+ icon="fullscreen"
179
+ ariaValue="Fullscreen preview"
180
+ onClick={() => false}
181
+ />
148
182
  </GridElements.GridItemTopActions>
149
183
  <GridElements.GridItemMedia>
150
184
  <img src="/d_trump.jpg" alt="Ronmo" />
151
185
  </GridElements.GridItemMedia>
152
186
  <GridElements.GridItemContent>
153
- <GridElements.GridItemTime time='10.11.2020' />
154
- <GridElements.GridItemTitle>Sed posuere consectetur est at lobortis</GridElements.GridItemTitle>
155
- <GridElements.GridItemText>Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis...</GridElements.GridItemText>
187
+ <GridElements.GridItemTime time="10.11.2020" />
188
+ <GridElements.GridItemTitle>
189
+ Sed posuere consectetur est at lobortis
190
+ </GridElements.GridItemTitle>
191
+ <GridElements.GridItemText>
192
+ Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere
193
+ consectetur est at lobortis...
194
+ </GridElements.GridItemText>
156
195
  </GridElements.GridItemContent>
157
196
  <GridElements.GridItemFooter>
158
- <GridElements.GridItemFooterBlock align='left'>
159
- <Icon name='photo' className='sd-grid-item__type-icn' />
160
- <Badge text='3' color='orange--500' />
161
- <Badge text='5' shape='square' color='blue-grey--300' />
197
+ <GridElements.GridItemFooterBlock align="left">
198
+ <Icon name="photo" className="sd-grid-item__type-icn" />
199
+ <Badge text="3" color="orange--500" />
200
+ <Badge text="5" shape="square" color="blue-grey--300" />
162
201
  </GridElements.GridItemFooterBlock>
163
202
  <GridElements.GridItemFooterActions>
164
- <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
203
+ <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
165
204
  </GridElements.GridItemFooterActions>
166
205
  </GridElements.GridItemFooter>
167
206
  </GridElements.GridItem>
168
207
 
169
- <GridElements.GridItem itemtype='slideshow' fetched={true} onClick={()=> false}>
208
+ <GridElements.GridItem itemtype="slideshow" fetched={true} onClick={() => false}>
170
209
  <GridElements.GridItemMedia></GridElements.GridItemMedia>
171
210
  <GridElements.GridItemContent>
172
- <GridElements.GridItemTime time='10.11.2020' />
173
- <GridElements.GridItemTitle>Nulla vitae elit libero, a pharetra augue</GridElements.GridItemTitle>
174
- <GridElements.GridItemText>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui...</GridElements.GridItemText>
211
+ <GridElements.GridItemTime time="10.11.2020" />
212
+ <GridElements.GridItemTitle>
213
+ Nulla vitae elit libero, a pharetra augue
214
+ </GridElements.GridItemTitle>
215
+ <GridElements.GridItemText>
216
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio
217
+ dui...
218
+ </GridElements.GridItemText>
175
219
  </GridElements.GridItemContent>
176
220
  <GridElements.GridItemFooter>
177
- <GridElements.GridItemFooterBlock align='left'>
178
- <Icon name='slideshow' className='sd-grid-item__type-icn' />
179
- <Badge text='1' color='deep-orange--600' />
180
- <Badge text='5' shape='square' color='blue-grey--300' />
221
+ <GridElements.GridItemFooterBlock align="left">
222
+ <Icon name="slideshow" className="sd-grid-item__type-icn" />
223
+ <Badge text="1" color="deep-orange--600" />
224
+ <Badge text="5" shape="square" color="blue-grey--300" />
181
225
  </GridElements.GridItemFooterBlock>
182
226
  <GridElements.GridItemFooterActions>
183
- <IconButton icon='dots-vertical' ariaValue='Actions' onClick={()=> false} />
227
+ <IconButton icon="dots-vertical" ariaValue="Actions" onClick={() => false} />
184
228
  </GridElements.GridItemFooterActions>
185
229
  </GridElements.GridItemFooter>
186
230
  </GridElements.GridItem>
187
-
188
231
  </GridList>
189
-
190
232
  </Markup.ReactMarkupPreview>
191
- <Markup.ReactMarkupCode>{`
233
+ <Markup.ReactMarkupCode>
234
+ {`
192
235
  <GridList size="small" gap="medium" margin="1">
193
236
  <GridElements.GridItem itemtype='photo' status={this.state.status} onClick={()=> false}>
194
237
  <GridElements.GridItemCheckWrapper>
@@ -315,39 +358,50 @@ export default class GridItemDoc extends React.Component<{}, IState> {
315
358
  </Markup.ReactMarkup>
316
359
 
317
360
  <h3 className="docs-page__h3 docs-page__h3--small-top-m">Minimal structure</h3>
318
- <p className="docs-page__paragraph">Mandatory structural sub-elements of the <code>GridItem</code> are <code>GridItemMedia</code> and <code>GridItemContent</code>. The use of the <code>GridItemText</code> component is optional,
319
- any appropriate and properly styled HTML element can be used instead.
361
+ <p className="docs-page__paragraph">
362
+ Mandatory structural sub-elements of the <code>GridItem</code> are <code>GridItemMedia</code> and{' '}
363
+ <code>GridItemContent</code>. The use of the <code>GridItemText</code> component is optional, any
364
+ appropriate and properly styled HTML element can be used instead.
320
365
  </p>
321
366
 
322
367
  <Markup.ReactMarkup>
323
368
  <Markup.ReactMarkupPreview>
324
369
  <GridList size="small" gap="medium" margin="1">
325
- <GridElements.GridItem itemtype='photo' onClick={()=> false}>
370
+ <GridElements.GridItem itemtype="photo" onClick={() => false}>
326
371
  <GridElements.GridItemMedia>
327
372
  <img src="/bill.jpg" alt="Bill" />
328
373
  </GridElements.GridItemMedia>
329
374
  <GridElements.GridItemContent>
330
- <GridElements.GridItemText>Item description cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet...</GridElements.GridItemText>
375
+ <GridElements.GridItemText>
376
+ Item description cras mattis consectetur purus sit amet fermentum. Vivamus
377
+ sagittis lacus vel augue laoreet...
378
+ </GridElements.GridItemText>
331
379
  </GridElements.GridItemContent>
332
380
  </GridElements.GridItem>
333
381
 
334
- <GridElements.GridItem itemtype='audio' locked={true} fetched={true} onClick={()=> false}>
382
+ <GridElements.GridItem itemtype="audio" locked={true} fetched={true} onClick={() => false}>
335
383
  <GridElements.GridItemMedia></GridElements.GridItemMedia>
336
384
  <GridElements.GridItemContent>
337
- <GridElements.GridItemText>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis...</GridElements.GridItemText>
385
+ <GridElements.GridItemText>
386
+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
387
+ Sed posuere consectetur est at lobortis...
388
+ </GridElements.GridItemText>
338
389
  </GridElements.GridItemContent>
339
390
  </GridElements.GridItem>
340
391
 
341
- <GridElements.GridItem itemtype='composite' status={['activated']}>
392
+ <GridElements.GridItem itemtype="composite" status={['activated']}>
342
393
  <GridElements.GridItemMedia></GridElements.GridItemMedia>
343
394
  <GridElements.GridItemContent>
344
- <GridElements.GridItemText>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna...</GridElements.GridItemText>
395
+ <GridElements.GridItemText>
396
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam
397
+ eget risus varius blandit sit amet non magna...
398
+ </GridElements.GridItemText>
345
399
  </GridElements.GridItemContent>
346
400
  </GridElements.GridItem>
347
401
  </GridList>
348
-
349
402
  </Markup.ReactMarkupPreview>
350
- <Markup.ReactMarkupCode>{`
403
+ <Markup.ReactMarkupCode>
404
+ {`
351
405
  <GridList size="small" gap="medium" margin="1">
352
406
  <GridElements.GridItem itemtype='photo' onClick={()=> false}>
353
407
  <GridElements.GridItemMedia>
@@ -375,34 +429,79 @@ export default class GridItemDoc extends React.Component<{}, IState> {
375
429
  `}
376
430
  </Markup.ReactMarkupCode>
377
431
  </Markup.ReactMarkup>
378
-
432
+
379
433
  <h3 className="docs-page__h3">GridItem Props</h3>
380
434
  <PropsList>
381
- <Prop name='status' isRequired={false} type='actioning | selected | activated | string' default='/' description='Specifies the status of the item. Multiple values are possible.'/>
382
- <Prop name='itemtype' isRequired={false} type='audio | composite | file | graphic | photo | slideshow | text | video | string' default='file' description='Specifies the file type of the item.'/>
383
- <Prop name='fetched' isRequired={false} type='boolean' default='false' description='If set to true it will add a visual marker in the content area indicating that the item was fetched.'/>
384
- <Prop name='locked' isRequired={false} type='boolean' default='false' description='Visual indication if the item is locked (red border at the bottom).'/>
385
- <Prop name='onClick' isRequired={false} type='function' default='false' description='Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present.'/>
435
+ <Prop
436
+ name="status"
437
+ isRequired={false}
438
+ type="actioning | selected | activated | string"
439
+ default="/"
440
+ description="Specifies the status of the item. Multiple values are possible."
441
+ />
442
+ <Prop
443
+ name="itemtype"
444
+ isRequired={false}
445
+ type="audio | composite | file | graphic | photo | slideshow | text | video | string"
446
+ default="file"
447
+ description="Specifies the file type of the item."
448
+ />
449
+ <Prop
450
+ name="fetched"
451
+ isRequired={false}
452
+ type="boolean"
453
+ default="false"
454
+ description="If set to true it will add a visual marker in the content area indicating that the item was fetched."
455
+ />
456
+ <Prop
457
+ name="locked"
458
+ isRequired={false}
459
+ type="boolean"
460
+ default="false"
461
+ description="Visual indication if the item is locked (red border at the bottom)."
462
+ />
463
+ <Prop
464
+ name="onClick"
465
+ isRequired={false}
466
+ type="function"
467
+ default="false"
468
+ description="Callback fired when when the item is pressed. Should be added only if there is a click action on the whole item. Adds pointer cursor and hover action to the item if present."
469
+ />
386
470
  </PropsList>
387
471
 
388
472
  <h3 className="docs-page__h3">GridItemFooterBlock Props</h3>
389
473
  <PropsList>
390
- <Prop name='align' isRequired={false} type='left | right' default='left' description='Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component.'/>
474
+ <Prop
475
+ name="align"
476
+ isRequired={false}
477
+ type="left | right"
478
+ default="left"
479
+ description="Sets the alignment of items inside the footer. Must be placed inside the GridItemFooter component."
480
+ />
391
481
  </PropsList>
392
482
 
393
483
  <h3 className="docs-page__h3">GridItemFooterActions Props</h3>
394
484
  <PropsList>
395
- <Prop name='autohide' isRequired={false} type='boolean' default='true' description='Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible.'/>
485
+ <Prop
486
+ name="autohide"
487
+ isRequired={false}
488
+ type="boolean"
489
+ default="true"
490
+ description="Action buttons in the footer are by default hidden and revealed only when the cursor hovers the item. Set to false to make the action buttons always visible."
491
+ />
396
492
  </PropsList>
397
493
 
398
494
  <h3 className="docs-page__h3">GridItemTime Props</h3>
399
495
  <PropsList>
400
- <Prop name='time' isRequired={true} type='sring' default='/' description='Sets the value of the time component.'/>
496
+ <Prop
497
+ name="time"
498
+ isRequired={true}
499
+ type="sring"
500
+ default="/"
501
+ description="Sets the value of the time component."
502
+ />
401
503
  </PropsList>
402
-
403
-
404
-
405
504
  </section>
406
- )
505
+ );
407
506
  }
408
- }
507
+ }
@@ -1,28 +1,32 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { GridList, Prop, PropsList } from '../../../app-typescript';
4
-
3
+ import {GridList, Prop, PropsList} from '../../../app-typescript';
5
4
 
6
5
  export default class GridListDoc extends React.Component {
7
6
  render() {
8
7
  return (
9
- <section className='docs-page__container'>
10
- <h2 className='docs-page__h2'>GridList</h2>
11
-
12
- <Markup.ReactMarkupCodePreview>{`
8
+ <section className="docs-page__container">
9
+ <h2 className="docs-page__h2">GridList</h2>
10
+
11
+ <Markup.ReactMarkupCodePreview>
12
+ {`
13
13
  <GridList size="small" gap="medium" margin="1">
14
14
  ...
15
15
  </GridList>
16
16
  `}
17
17
  </Markup.ReactMarkupCodePreview>
18
18
 
19
- <p className="docs-page__paragraph">Grid list component implemented with CSS grid. The list is responsive by default, no additional media query is needed. Any container item can be placed inside the grid list but it's ideally combined with the GridItem.</p>
19
+ <p className="docs-page__paragraph">
20
+ Grid list component implemented with CSS grid. The list is responsive by default, no additional
21
+ media query is needed. Any container item can be placed inside the grid list but it's ideally
22
+ combined with the GridItem.
23
+ </p>
20
24
 
21
25
  <Markup.ReactMarkup>
22
26
  <Markup.ReactMarkupPreview>
23
27
  <p className="docs-page__paragraph">// default (small)</p>
24
28
  <GridList size="small" gap="medium" margin="1">
25
- <div className="docs-page__example-box sd-shadow--z2">
29
+ <div className="docs-page__example-box sd-shadow--z2">
26
30
  <p>Item 1</p>
27
31
  </div>
28
32
  <div className="docs-page__example-box sd-shadow--z2">
@@ -65,9 +69,9 @@ export default class GridListDoc extends React.Component {
65
69
  <p>Item 4</p>
66
70
  </div>
67
71
  </GridList>
68
-
69
72
  </Markup.ReactMarkupPreview>
70
- <Markup.ReactMarkupCode>{`
73
+ <Markup.ReactMarkupCode>
74
+ {`
71
75
  // default (small)
72
76
  <GridList size="small" gap="medium" margin="1">
73
77
  Item 1
@@ -92,15 +96,31 @@ export default class GridListDoc extends React.Component {
92
96
  </Markup.ReactMarkupCode>
93
97
  </Markup.ReactMarkup>
94
98
 
95
-
96
99
  <h3 className="docs-page__h3">Props</h3>
97
100
  <PropsList>
98
- <Prop name='size' isRequired={false} type='x-small | small | medium | large' default='small' description='Specifies the size of the items in the grid. '/>
99
- <Prop name='gap' isRequired={false} type='small | medium | large | x-large' default='small' description='Defines the gap between the items inside the Grid list. '/>
100
- <Prop name='margin' isRequired={false} type='0 | 1 | 2 | 3' default='3' description='Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px.'/>
101
+ <Prop
102
+ name="size"
103
+ isRequired={false}
104
+ type="x-small | small | medium | large"
105
+ default="small"
106
+ description="Specifies the size of the items in the grid. "
107
+ />
108
+ <Prop
109
+ name="gap"
110
+ isRequired={false}
111
+ type="small | medium | large | x-large"
112
+ default="small"
113
+ description="Defines the gap between the items inside the Grid list. "
114
+ />
115
+ <Prop
116
+ name="margin"
117
+ isRequired={false}
118
+ type="0 | 1 | 2 | 3"
119
+ default="3"
120
+ description="Defines the margin around the Grid list. The values are based on multipliers of the the $sd-base-increment (equal to 8px). Setting the value to 3 results in a margin of 24px."
121
+ />
101
122
  </PropsList>
102
-
103
123
  </section>
104
- )
124
+ );
105
125
  }
106
- }
126
+ }