superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.10

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 (709) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_big-icons.eot +0 -0
  3. package/app/fonts/sd_big-icons.svg +55 -53
  4. package/app/fonts/sd_big-icons.ttf +0 -0
  5. package/app/fonts/sd_big-icons.woff +0 -0
  6. package/app/fonts/sd_icons.eot +0 -0
  7. package/app/fonts/sd_icons.svg +15 -7
  8. package/app/fonts/sd_icons.ttf +0 -0
  9. package/app/fonts/sd_icons.woff +0 -0
  10. package/app/img/SD-logo.svg +52 -0
  11. package/app/img/dots.svg +3 -0
  12. package/app/img/spinner.svg +3 -0
  13. package/app/img/themes/theme-base.svg +1 -0
  14. package/app/img/themes/theme-contrast.svg +45 -0
  15. package/app/img/themes/theme-dark.svg +1 -0
  16. package/app/img/themes/theme-light.svg +1 -0
  17. package/app/index.js +1 -1
  18. package/app/scripts/modals.js +22 -9
  19. package/app/styles/_accessibility.scss +312 -4
  20. package/app/styles/_alerts.scss +57 -19
  21. package/app/styles/_avatar.scss +25 -1
  22. package/app/styles/_badge.scss +2 -2
  23. package/app/styles/_big-icon-font.scss +64 -24
  24. package/app/styles/_boxed-list.scss +67 -21
  25. package/app/styles/_buttons.scss +435 -332
  26. package/app/styles/_carousel.scss +17 -11
  27. package/app/styles/_design-tokens.scss +2 -0
  28. package/app/styles/_hamburger.scss +160 -0
  29. package/app/styles/_helpers.scss +198 -34
  30. package/app/styles/_icon-font.scss +351 -307
  31. package/app/styles/_icon-labels.scss +66 -10
  32. package/app/styles/_labels.scss +12 -6
  33. package/app/styles/_loaders.scss +13 -0
  34. package/app/styles/_master-desk.scss +5 -5
  35. package/app/styles/_mixins.scss +13 -3
  36. package/app/styles/_modals.scss +4 -28
  37. package/app/styles/_normalize.scss +1 -0
  38. package/app/styles/_panel-info.scss +19 -14
  39. package/app/styles/_sd-tag-input.scss +226 -219
  40. package/app/styles/_simple-list.scss +39 -17
  41. package/app/styles/_spinner.scss +46 -0
  42. package/app/styles/_table-list.scss +244 -0
  43. package/app/styles/_tabs.scss +6 -8
  44. package/app/styles/_tag-labels.scss +11 -2
  45. package/app/styles/_thumb-carousel.scss +11 -10
  46. package/app/styles/_toggle-box.scss +46 -12
  47. package/app/styles/_toggle-button.scss +42 -0
  48. package/app/styles/_tooltips.scss +3 -3
  49. package/app/styles/_variables.scss +0 -1
  50. package/app/styles/app.scss +13 -2
  51. package/app/styles/components/_card-item.scss +33 -21
  52. package/app/styles/components/_list-item.scss +45 -24
  53. package/app/styles/components/_sd-dropzone.scss +114 -0
  54. package/app/styles/components/_sd-grid-item.scss +32 -18
  55. package/app/styles/components/_sd-notification-panel.scss +48 -0
  56. package/app/styles/components/_sd-photo-preview.scss +1 -1
  57. package/app/styles/components/_sd-searchbar.scss +12 -98
  58. package/app/styles/components/_subnav.scss +149 -120
  59. package/app/styles/components/_theme-selector.scss +189 -0
  60. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  61. package/app/styles/{variables → design-tokens}/_new-colors.scss +42 -21
  62. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  63. package/app/styles/editor/_editor-buttons.scss +54 -0
  64. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  65. package/app/styles/form-elements/_checkbox.scss +85 -58
  66. package/app/styles/form-elements/_forms-general.scss +171 -21
  67. package/app/styles/form-elements/_inputs.scss +393 -64
  68. package/app/styles/form-elements/_select-grid.scss +79 -0
  69. package/app/styles/grids/_basic-grid.scss +52 -26
  70. package/app/styles/grids/_grid-layout.scss +198 -66
  71. package/app/styles/grids/_layout-grid.scss +4 -4
  72. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  73. package/app/styles/interface-elements/_side-panel.scss +87 -58
  74. package/app/styles/layout/_basic-layout.scss +3 -6
  75. package/app/styles/layout/_container.scss +35 -0
  76. package/app/styles/layout/_editor.scss +398 -0
  77. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  78. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  79. package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
  80. package/app/styles/menus/_sd-top-menu.scss +19 -5
  81. package/app/styles/pr-superdesk-theme.scss +3 -0
  82. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  83. package/app/styles/primereact/_pr-dialog.scss +39 -7
  84. package/app/styles/primereact/_pr-dropdown.scss +170 -7
  85. package/app/styles/primereact/_pr-general.scss +4 -0
  86. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  87. package/app/styles/variables/_colors.scss +2 -452
  88. package/app/styles/variables/_dimensions.scss +85 -1
  89. package/app/styles/variables/_form-elements.scss +0 -2
  90. package/app-typescript/components/Alert.tsx +16 -1
  91. package/app-typescript/components/Avatar.tsx +21 -0
  92. package/app-typescript/components/Badge.tsx +3 -2
  93. package/app-typescript/components/Button.tsx +7 -1
  94. package/app-typescript/components/ButtonGroup.tsx +5 -4
  95. package/app-typescript/components/Carousel.tsx +1 -1
  96. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  97. package/app-typescript/components/CheckGroup.tsx +2 -1
  98. package/app-typescript/components/Checkbox.tsx +7 -3
  99. package/app-typescript/components/CheckboxButton.tsx +9 -2
  100. package/app-typescript/components/CreateButton.tsx +38 -0
  101. package/app-typescript/components/DatePicker.tsx +77 -38
  102. package/app-typescript/components/DonutChart.tsx +1 -1
  103. package/app-typescript/components/DropZone.tsx +89 -0
  104. package/app-typescript/components/Dropdown.tsx +9 -1
  105. package/app-typescript/components/DurationInput.tsx +375 -0
  106. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  107. package/app-typescript/components/EmptyState.tsx +2 -1
  108. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  109. package/app-typescript/components/Form/FormItem.tsx +20 -0
  110. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  111. package/app-typescript/components/Form/FormRow.tsx +40 -0
  112. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  113. package/app-typescript/components/Form/FormText.tsx +15 -0
  114. package/app-typescript/components/Form/InputBase.tsx +85 -0
  115. package/app-typescript/components/Form/InputNew.tsx +107 -0
  116. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  117. package/app-typescript/components/Form/index.tsx +9 -0
  118. package/app-typescript/components/Icon.tsx +4 -2
  119. package/app-typescript/components/IconButton.tsx +30 -12
  120. package/app-typescript/components/IconLabel.tsx +8 -1
  121. package/app-typescript/components/IconPicker.tsx +277 -0
  122. package/app-typescript/components/Input.tsx +67 -35
  123. package/app-typescript/components/Label.tsx +49 -10
  124. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  125. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  126. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  127. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  128. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  129. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  131. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  132. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  134. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  135. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  136. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  137. package/app-typescript/components/Layouts/AuthoringMain.tsx +50 -0
  138. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  141. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  142. package/app-typescript/components/Layouts/Container.tsx +30 -0
  143. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  144. package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
  145. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  146. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  147. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
  148. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  149. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  150. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  151. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  152. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  153. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  154. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  155. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  156. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  157. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  158. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  159. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  160. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  161. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  162. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  163. package/app-typescript/components/Layouts/index.tsx +43 -0
  164. package/app-typescript/components/LeftMenu.tsx +116 -31
  165. package/app-typescript/components/ListItemLoader.tsx +30 -0
  166. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  167. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  168. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  169. package/app-typescript/components/Lists/TableList.tsx +212 -0
  170. package/app-typescript/components/Lists/index.tsx +2 -0
  171. package/app-typescript/components/Menu.tsx +31 -7
  172. package/app-typescript/components/Modal.tsx +31 -18
  173. package/app-typescript/components/MultiSelect.tsx +99 -0
  174. package/app-typescript/components/NavButton.tsx +4 -0
  175. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  176. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  177. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  178. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  179. package/app-typescript/components/Navigation/index.tsx +3 -0
  180. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  181. package/app-typescript/components/RadioGroup.tsx +69 -0
  182. package/app-typescript/components/SearchBar.tsx +98 -0
  183. package/app-typescript/components/Select.tsx +31 -31
  184. package/app-typescript/components/SelectGrid.tsx +233 -0
  185. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  186. package/app-typescript/components/SidebarMenu.tsx +68 -0
  187. package/app-typescript/components/Skeleton.tsx +48 -0
  188. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  189. package/app-typescript/components/Spinner.tsx +32 -0
  190. package/app-typescript/components/SubNav.tsx +25 -4
  191. package/app-typescript/components/Switch.tsx +34 -12
  192. package/app-typescript/components/SwitchGroup.tsx +2 -1
  193. package/app-typescript/components/Tag.tsx +31 -7
  194. package/app-typescript/components/Text/Heading.tsx +67 -0
  195. package/app-typescript/components/Text/Text.tsx +36 -0
  196. package/app-typescript/components/Text/Time.tsx +34 -0
  197. package/app-typescript/components/ThemeSelector.tsx +113 -0
  198. package/app-typescript/components/TimePicker.tsx +50 -16
  199. package/app-typescript/components/Togglebox.tsx +9 -7
  200. package/app-typescript/components/Tooltip.tsx +7 -5
  201. package/app-typescript/components/TreeSelect.tsx +558 -0
  202. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  203. package/app-typescript/dist/components/Alert.d.ts +16 -0
  204. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  205. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  206. package/app-typescript/dist/components/Badge.d.ts +13 -0
  207. package/app-typescript/dist/components/Button.d.ts +23 -0
  208. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  209. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  210. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  211. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  212. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  213. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  214. package/app-typescript/dist/components/Divider.d.ts +9 -0
  215. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  216. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  217. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  218. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  219. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  220. package/app-typescript/dist/components/Genie.d.ts +13 -0
  221. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  222. package/app-typescript/dist/components/GridList.d.ts +14 -0
  223. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  224. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  225. package/app-typescript/dist/components/Icon.d.ts +12 -0
  226. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  227. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  228. package/app-typescript/dist/components/Input.d.ts +24 -0
  229. package/app-typescript/dist/components/Label.d.ts +15 -0
  230. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  231. package/app-typescript/dist/components/Loader.d.ts +8 -0
  232. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  233. package/app-typescript/dist/components/Popover.d.ts +13 -0
  234. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  235. package/{react → app-typescript/dist}/components/Radio.d.ts +7 -8
  236. package/{react → app-typescript/dist}/components/RadioButton.d.ts +0 -0
  237. package/app-typescript/dist/components/Select.d.ts +29 -0
  238. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  239. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  240. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  241. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  242. package/app-typescript/dist/components/Switch.d.ts +12 -0
  243. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  244. package/app-typescript/dist/components/TabList.d.ts +22 -0
  245. package/app-typescript/dist/components/Tag.d.ts +9 -0
  246. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  247. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  248. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  249. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  250. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  251. package/app-typescript/dist/index.d.ts +56 -0
  252. package/app-typescript/helpers.tsx +3 -0
  253. package/app-typescript/index.ts +29 -3
  254. package/dist/SD-logo.svg +52 -0
  255. package/dist/avatar-2.jpg +0 -0
  256. package/dist/avatar-3.jpg +0 -0
  257. package/dist/avatar-4.jpg +0 -0
  258. package/dist/avatar-5.jpg +0 -0
  259. package/dist/avatar-6.jpg +0 -0
  260. package/dist/components/basic-grid.html +1 -1
  261. package/dist/components/checkbox.html +1 -1
  262. package/dist/components/modals.html +1 -0
  263. package/dist/dots.svg +3 -0
  264. package/dist/examples.bundle.css +8901 -1602
  265. package/dist/examples.bundle.js +103604 -77680
  266. package/dist/playgrounds/accessible-theme-test.html +1 -1
  267. package/dist/playgrounds/boxed-list.html +1 -1
  268. package/dist/playgrounds/cards.html +9 -4
  269. package/dist/playgrounds/editor-3-test.html +15 -0
  270. package/dist/playgrounds/form-layout.html +9 -7
  271. package/dist/playgrounds/layout-test-2.html +1 -1
  272. package/dist/playgrounds/list-item-test.html +1 -1
  273. package/dist/playgrounds/master-desk.html +2 -4
  274. package/dist/playgrounds/media-carousel.html +1 -1
  275. package/dist/playgrounds/photo-desk.html +1 -1
  276. package/dist/playgrounds/planning.html +1 -1
  277. package/dist/playgrounds/publish.html +1 -1
  278. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  279. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  280. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  281. package/dist/playgrounds/publisher-content-lists.html +1 -1
  282. package/dist/playgrounds/publisher-dashboard.html +1 -1
  283. package/dist/playgrounds/publisher-output-control.html +1 -1
  284. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  285. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  286. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  287. package/dist/playgrounds/react-playgrounds/Index.tsx +7 -1
  288. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  289. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  290. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  291. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  292. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  293. package/dist/playgrounds/react-playgrounds/TestGround.tsx +457 -23
  294. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  295. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  296. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  297. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  298. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  299. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  300. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  301. package/dist/playgrounds/swimlane-view.html +1 -1
  302. package/dist/playgrounds/toasts.html +1 -1
  303. package/dist/playgrounds/video-editor.html +1 -1
  304. package/dist/react/Alerts.tsx +91 -18
  305. package/dist/react/Avatar.tsx +314 -127
  306. package/dist/react/Badges.tsx +18 -0
  307. package/dist/react/BoxedList.tsx +362 -0
  308. package/dist/react/ButtonGroups.tsx +66 -65
  309. package/dist/react/Buttons.tsx +65 -113
  310. package/dist/react/Carousel.tsx +2 -3
  311. package/dist/react/Checkboxs.tsx +66 -25
  312. package/dist/react/Container.tsx +143 -0
  313. package/dist/react/ContentList.tsx +286 -0
  314. package/dist/react/CreateButton.tsx +71 -0
  315. package/dist/react/DatePicker.tsx +31 -6
  316. package/dist/react/DropZone.tsx +111 -0
  317. package/dist/react/DurationInput.tsx +104 -0
  318. package/dist/react/Heading.tsx +106 -0
  319. package/dist/react/IconButtons.tsx +51 -21
  320. package/dist/react/IconFont.tsx +7 -6
  321. package/dist/react/IconLabels.tsx +24 -2
  322. package/dist/react/IconPicker.tsx +65 -0
  323. package/dist/react/Index.tsx +125 -19
  324. package/dist/react/Inputs.tsx +295 -6
  325. package/dist/react/Labels.tsx +51 -1
  326. package/dist/react/LeftNavigations.tsx +194 -15
  327. package/dist/react/ListItems.tsx +34 -0
  328. package/dist/react/Modal.tsx +8 -7
  329. package/dist/react/MultiSelect.tsx +201 -0
  330. package/dist/react/NavButtons.tsx +4 -4
  331. package/dist/react/Panel.tsx +366 -0
  332. package/dist/react/QuickNavigationBar.tsx +142 -0
  333. package/dist/react/RadioGroup.tsx +351 -0
  334. package/dist/react/SelectGrid.tsx +121 -0
  335. package/dist/react/SelectWithTemplate.tsx +6 -1
  336. package/dist/react/Selects.tsx +57 -0
  337. package/dist/react/SimpleList.tsx +148 -0
  338. package/dist/react/SubNav.tsx +65 -18
  339. package/dist/react/TableList.tsx +248 -0
  340. package/dist/react/Tags.tsx +57 -5
  341. package/dist/react/Text.tsx +134 -0
  342. package/dist/react/TimePicker.tsx +22 -12
  343. package/dist/react/TreeSelect.tsx +431 -0
  344. package/dist/react/WithSizeObserver.tsx +44 -0
  345. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  346. package/dist/react/tree-select/example-1.tsx +71 -0
  347. package/dist/react/tree-select/example-2.tsx +59 -0
  348. package/dist/react.html +4 -0
  349. package/dist/sd_big-icons.eot +0 -0
  350. package/dist/sd_big-icons.svg +55 -53
  351. package/dist/sd_big-icons.ttf +0 -0
  352. package/dist/sd_big-icons.woff +0 -0
  353. package/dist/sd_icons.eot +0 -0
  354. package/dist/sd_icons.svg +15 -7
  355. package/dist/sd_icons.ttf +0 -0
  356. package/dist/sd_icons.woff +0 -0
  357. package/dist/superdesk-ui.bundle.css +55129 -25144
  358. package/dist/superdesk-ui.bundle.js +76296 -56362
  359. package/dist/vendor.bundle.js +25684 -25662
  360. package/examples/css/docs-page.css +99 -29
  361. package/examples/img/avatar-2.jpg +0 -0
  362. package/examples/img/avatar-3.jpg +0 -0
  363. package/examples/img/avatar-4.jpg +0 -0
  364. package/examples/img/avatar-5.jpg +0 -0
  365. package/examples/img/avatar-6.jpg +0 -0
  366. package/examples/index.js +28 -0
  367. package/examples/pages/components/basic-grid.html +1 -1
  368. package/examples/pages/components/checkbox.html +1 -1
  369. package/examples/pages/components/modals.html +1 -0
  370. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  371. package/examples/pages/playgrounds/boxed-list.html +1 -1
  372. package/examples/pages/playgrounds/cards.html +9 -4
  373. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  374. package/examples/pages/playgrounds/form-layout.html +9 -7
  375. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  376. package/examples/pages/playgrounds/list-item-test.html +1 -1
  377. package/examples/pages/playgrounds/master-desk.html +2 -4
  378. package/examples/pages/playgrounds/media-carousel.html +1 -1
  379. package/examples/pages/playgrounds/photo-desk.html +1 -1
  380. package/examples/pages/playgrounds/planning.html +1 -1
  381. package/examples/pages/playgrounds/publish.html +1 -1
  382. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  383. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  384. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  385. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  386. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  387. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  388. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +155 -0
  389. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  390. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  391. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +7 -1
  392. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  393. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  394. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +474 -0
  395. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  396. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  397. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +457 -23
  398. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  399. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  400. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  401. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  402. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  403. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  404. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  405. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  406. package/examples/pages/playgrounds/toasts.html +1 -1
  407. package/examples/pages/playgrounds/video-editor.html +1 -1
  408. package/examples/pages/react/Alerts.tsx +91 -18
  409. package/examples/pages/react/Avatar.tsx +314 -127
  410. package/examples/pages/react/Badges.tsx +18 -0
  411. package/examples/pages/react/BoxedList.tsx +362 -0
  412. package/examples/pages/react/ButtonGroups.tsx +66 -65
  413. package/examples/pages/react/Buttons.tsx +65 -113
  414. package/examples/pages/react/Carousel.tsx +2 -3
  415. package/examples/pages/react/Checkboxs.tsx +66 -25
  416. package/examples/pages/react/Container.tsx +143 -0
  417. package/examples/pages/react/ContentList.tsx +286 -0
  418. package/examples/pages/react/CreateButton.tsx +71 -0
  419. package/examples/pages/react/DatePicker.tsx +31 -6
  420. package/examples/pages/react/DropZone.tsx +111 -0
  421. package/examples/pages/react/DurationInput.tsx +104 -0
  422. package/examples/pages/react/Heading.tsx +106 -0
  423. package/examples/pages/react/IconButtons.tsx +51 -21
  424. package/examples/pages/react/IconFont.tsx +7 -6
  425. package/examples/pages/react/IconLabels.tsx +24 -2
  426. package/examples/pages/react/IconPicker.tsx +65 -0
  427. package/examples/pages/react/Index.tsx +125 -19
  428. package/examples/pages/react/Inputs.tsx +295 -6
  429. package/examples/pages/react/Labels.tsx +51 -1
  430. package/examples/pages/react/LeftNavigations.tsx +194 -15
  431. package/examples/pages/react/ListItems.tsx +34 -0
  432. package/examples/pages/react/Modal.tsx +8 -7
  433. package/examples/pages/react/MultiSelect.tsx +201 -0
  434. package/examples/pages/react/NavButtons.tsx +4 -4
  435. package/examples/pages/react/Panel.tsx +366 -0
  436. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  437. package/examples/pages/react/RadioGroup.tsx +351 -0
  438. package/examples/pages/react/SelectGrid.tsx +121 -0
  439. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  440. package/examples/pages/react/Selects.tsx +57 -0
  441. package/examples/pages/react/SimpleList.tsx +148 -0
  442. package/examples/pages/react/SubNav.tsx +65 -18
  443. package/examples/pages/react/TableList.tsx +248 -0
  444. package/examples/pages/react/Tags.tsx +57 -5
  445. package/examples/pages/react/Text.tsx +134 -0
  446. package/examples/pages/react/TimePicker.tsx +22 -12
  447. package/examples/pages/react/TreeSelect.tsx +431 -0
  448. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  449. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  450. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  451. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  452. package/examples/pages/react.html +4 -0
  453. package/package.json +16 -11
  454. package/react/components/Alert.d.ts +3 -0
  455. package/react/components/Alert.js +17 -7
  456. package/react/components/Autocomplete.js +16 -12
  457. package/react/components/Avatar.d.ts +9 -0
  458. package/react/components/Avatar.js +24 -4
  459. package/react/components/Badge.d.ts +1 -0
  460. package/react/components/Badge.js +9 -7
  461. package/react/components/Button.d.ts +2 -0
  462. package/react/components/Button.js +12 -8
  463. package/react/components/ButtonGroup.d.ts +3 -2
  464. package/react/components/ButtonGroup.js +9 -7
  465. package/react/components/Carousel.js +5 -3
  466. package/react/components/CheckButtonGroup.d.ts +3 -1
  467. package/react/components/CheckButtonGroup.js +14 -6
  468. package/react/components/CheckGroup.d.ts +1 -0
  469. package/react/components/CheckGroup.js +6 -4
  470. package/react/components/Checkbox.d.ts +2 -1
  471. package/react/components/Checkbox.js +7 -5
  472. package/react/components/CheckboxButton.d.ts +1 -0
  473. package/react/components/CheckboxButton.js +8 -6
  474. package/react/components/ContentDivider.js +8 -6
  475. package/react/components/CreateButton.d.ts +17 -0
  476. package/react/components/CreateButton.js +68 -0
  477. package/react/components/DatePicker.d.ts +11 -0
  478. package/react/components/DatePicker.js +45 -31
  479. package/react/components/Divider.js +6 -4
  480. package/react/components/DonutChart.d.ts +1 -1
  481. package/react/components/DonutChart.js +24 -6
  482. package/react/components/DropZone.d.ts +25 -0
  483. package/react/components/DropZone.js +95 -0
  484. package/react/components/Dropdown.d.ts +1 -0
  485. package/react/components/Dropdown.js +10 -9
  486. package/react/components/DropdownFirst.js +18 -11
  487. package/react/components/DurationInput.d.ts +42 -0
  488. package/react/components/DurationInput.js +335 -0
  489. package/react/components/EmptyState.d.ts +1 -0
  490. package/react/components/EmptyState.js +8 -6
  491. package/react/components/Form/FormGroup.d.ts +13 -0
  492. package/react/components/Form/FormGroup.js +63 -0
  493. package/react/components/Form/FormItem.d.ts +9 -0
  494. package/react/components/Form/FormItem.js +56 -0
  495. package/react/components/Form/FormLabel.d.ts +10 -0
  496. package/react/components/Form/FormLabel.js +56 -0
  497. package/react/components/Form/FormRow.d.ts +17 -0
  498. package/react/components/Form/FormRow.js +64 -0
  499. package/react/components/Form/FormRowNew.d.ts +12 -0
  500. package/react/components/Form/FormRowNew.js +67 -0
  501. package/react/components/Form/FormText.d.ts +8 -0
  502. package/react/components/Form/FormText.js +49 -0
  503. package/react/components/Form/InputBase.d.ts +42 -0
  504. package/react/components/Form/InputBase.js +72 -0
  505. package/react/components/Form/InputNew.d.ts +45 -0
  506. package/react/components/Form/InputNew.js +75 -0
  507. package/react/components/Form/InputWrapper.d.ts +28 -0
  508. package/react/components/Form/InputWrapper.js +91 -0
  509. package/react/components/Form/index.d.ts +9 -0
  510. package/react/components/Form/index.js +21 -0
  511. package/react/components/FormLabel.js +5 -3
  512. package/react/components/GridItem.js +9 -7
  513. package/react/components/GridList.js +8 -6
  514. package/react/components/HeadingText.js +4 -2
  515. package/react/components/HelloWorld.js +4 -2
  516. package/react/components/Icon.d.ts +2 -1
  517. package/react/components/Icon.js +9 -6
  518. package/react/components/IconButton.d.ts +9 -2
  519. package/react/components/IconButton.js +17 -7
  520. package/react/components/IconLabel.d.ts +2 -0
  521. package/react/components/IconLabel.js +12 -7
  522. package/react/components/IconPicker.d.ts +24 -0
  523. package/react/components/IconPicker.js +287 -0
  524. package/react/components/Input.d.ts +25 -3
  525. package/react/components/Input.js +21 -26
  526. package/react/components/Label.d.ts +1 -0
  527. package/react/components/Label.js +28 -10
  528. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  529. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  530. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  531. package/react/components/Layouts/AuthoringContainer.js +60 -0
  532. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  533. package/react/components/Layouts/AuthoringFrame.js +58 -0
  534. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  535. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  536. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  537. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  538. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  539. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  540. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  541. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  542. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  543. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  544. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  545. package/react/components/Layouts/AuthoringFrameRightBar.js +49 -0
  546. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  547. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  548. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  549. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  550. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  551. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  552. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  553. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  554. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  555. package/react/components/Layouts/AuthoringMain.js +55 -0
  556. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  557. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  558. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  559. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  560. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  561. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  562. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  563. package/react/components/Layouts/BottomBarAction.js +59 -0
  564. package/react/components/Layouts/Container.d.ts +14 -0
  565. package/react/components/Layouts/Container.js +62 -0
  566. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  567. package/react/components/Layouts/ContentSplitter.js +58 -0
  568. package/react/components/Layouts/CoreLayout.d.ts +19 -0
  569. package/react/components/Layouts/CoreLayout.js +55 -0
  570. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  571. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  572. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  573. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  574. package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
  575. package/react/components/Layouts/CoreLayoutMain.js +49 -0
  576. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  577. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  578. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  579. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  580. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  581. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  582. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  583. package/react/components/Layouts/HamburgerButton.js +63 -0
  584. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  585. package/react/components/Layouts/HeaderPanel.js +49 -0
  586. package/react/components/Layouts/Layout.d.ts +8 -0
  587. package/react/components/Layouts/Layout.js +36 -0
  588. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  589. package/react/components/Layouts/LayoutContainer.js +49 -0
  590. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  591. package/react/components/Layouts/LeftPanel.js +56 -0
  592. package/react/components/Layouts/MainMenu.d.ts +41 -0
  593. package/react/components/Layouts/MainMenu.js +103 -0
  594. package/react/components/Layouts/MainPanel.d.ts +11 -0
  595. package/react/components/Layouts/MainPanel.js +59 -0
  596. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  597. package/react/components/Layouts/NotificationPanel.js +110 -0
  598. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  599. package/react/components/Layouts/OverlayPanel.js +51 -0
  600. package/react/components/Layouts/PageLayout.d.ts +16 -0
  601. package/react/components/Layouts/PageLayout.js +66 -0
  602. package/react/components/Layouts/Panel.d.ts +66 -0
  603. package/react/components/Layouts/Panel.js +168 -0
  604. package/react/components/Layouts/RightPanel.d.ts +9 -0
  605. package/react/components/Layouts/RightPanel.js +49 -0
  606. package/react/components/Layouts/index.d.ts +39 -0
  607. package/react/components/Layouts/index.js +86 -0
  608. package/react/components/LeftMenu.d.ts +13 -4
  609. package/react/components/LeftMenu.js +71 -18
  610. package/react/components/ListItemLoader.d.ts +4 -0
  611. package/react/components/ListItemLoader.js +64 -0
  612. package/react/components/Lists/BoxedList.d.ts +44 -0
  613. package/react/components/Lists/BoxedList.js +160 -0
  614. package/react/components/Lists/ContentList.d.ts +45 -0
  615. package/react/components/Lists/ContentList.js +85 -0
  616. package/react/components/Lists/SimpleList.d.ts +21 -0
  617. package/react/components/Lists/SimpleList.js +80 -0
  618. package/react/components/Lists/TableList.d.ts +42 -0
  619. package/react/components/Lists/TableList.js +145 -0
  620. package/react/components/Lists/index.d.ts +2 -0
  621. package/react/components/Lists/index.js +10 -0
  622. package/react/components/Loader.js +4 -2
  623. package/react/components/Menu.d.ts +2 -1
  624. package/react/components/Menu.js +48 -12
  625. package/react/components/Modal.d.ts +4 -1
  626. package/react/components/Modal.js +35 -6
  627. package/react/components/NavButton.d.ts +1 -0
  628. package/react/components/NavButton.js +9 -4
  629. package/react/components/Navigation/BottomNav.d.ts +24 -0
  630. package/react/components/Navigation/BottomNav.js +88 -0
  631. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  632. package/react/components/Navigation/QuickNavBar.js +117 -0
  633. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  634. package/react/components/Navigation/SideBarMenu.js +79 -0
  635. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  636. package/react/components/Navigation/SideBarTabs.js +88 -0
  637. package/react/components/Navigation/index.d.ts +3 -0
  638. package/react/components/Navigation/index.js +9 -0
  639. package/react/components/Popover.js +4 -2
  640. package/react/components/PropsList.js +4 -2
  641. package/react/components/RadioButtonGroup.d.ts +29 -0
  642. package/react/components/RadioButtonGroup.js +91 -0
  643. package/react/components/RadioGroup.d.ts +24 -0
  644. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  645. package/react/components/SearchBar.d.ts +24 -0
  646. package/react/components/SearchBar.js +105 -0
  647. package/react/components/Select.d.ts +9 -2
  648. package/react/components/Select.js +9 -20
  649. package/react/components/SelectGrid.d.ts +45 -0
  650. package/react/components/SelectGrid.js +200 -0
  651. package/react/components/SelectWithTemplate.d.ts +11 -1
  652. package/react/components/SelectWithTemplate.js +23 -12
  653. package/react/components/Skeleton.d.ts +30 -0
  654. package/react/components/Skeleton.js +76 -0
  655. package/react/components/SlidingToolbar.d.ts +1 -1
  656. package/react/components/SlidingToolbar.js +15 -3
  657. package/react/components/Spinner.d.ts +11 -0
  658. package/react/components/Spinner.js +71 -0
  659. package/react/components/StrechBar.js +4 -2
  660. package/react/components/SubNav.d.ts +8 -1
  661. package/react/components/SubNav.js +28 -8
  662. package/react/components/Switch.d.ts +4 -1
  663. package/react/components/Switch.js +25 -11
  664. package/react/components/SwitchGroup.d.ts +1 -0
  665. package/react/components/SwitchGroup.js +6 -4
  666. package/react/components/TabCustom.d.ts +0 -1
  667. package/react/components/TabCustom.js +11 -7
  668. package/react/components/TabList.js +6 -4
  669. package/react/components/Tag.d.ts +3 -2
  670. package/react/components/Tag.js +21 -9
  671. package/react/components/TagInput.d.ts +0 -1
  672. package/react/components/TagInput.js +7 -6
  673. package/react/components/TagInputTest.js +13 -9
  674. package/react/components/Text/Heading.d.ts +15 -0
  675. package/react/components/Text/Heading.js +79 -0
  676. package/react/components/Text/Text.d.ts +15 -0
  677. package/react/components/Text/Text.js +67 -0
  678. package/react/components/Text/Time.d.ts +15 -0
  679. package/react/components/Text/Time.js +65 -0
  680. package/react/components/ThemeSelector.d.ts +21 -0
  681. package/react/components/ThemeSelector.js +114 -0
  682. package/react/components/TimePicker.d.ts +16 -2
  683. package/react/components/TimePicker.js +19 -6
  684. package/react/components/Toast.js +1 -1
  685. package/react/components/ToastMessage.js +6 -5
  686. package/react/components/ToastText.js +1 -1
  687. package/react/components/ToastWrapper.d.ts +2 -2
  688. package/react/components/ToastWrapper.js +14 -10
  689. package/react/components/Togglebox.d.ts +2 -1
  690. package/react/components/Togglebox.js +42 -14
  691. package/react/components/Tooltip.d.ts +1 -0
  692. package/react/components/Tooltip.js +14 -10
  693. package/react/components/TreeSelect.d.ts +75 -0
  694. package/react/components/TreeSelect.js +448 -0
  695. package/react/components/WithSizeObserver.d.ts +25 -0
  696. package/react/components/WithSizeObserver.js +95 -0
  697. package/react/components/_Positioner.js +4 -2
  698. package/react/helpers.d.ts +1 -0
  699. package/react/helpers.js +7 -0
  700. package/react/index.d.ts +27 -3
  701. package/react/index.js +63 -4
  702. package/yarn-error.log +111 -0
  703. package/app/styles/variables/_design-tokens-general.scss +0 -136
  704. package/app-typescript/components/Radio.tsx +0 -57
  705. package/app-typescript/components/RadioButton.tsx +0 -57
  706. package/dist/react/Radios.tsx +0 -391
  707. package/examples/pages/react/Radios.tsx +0 -391
  708. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  709. package/react/components/RadioButton.js +0 -65
@@ -0,0 +1,111 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { DropZone, Button, Icon, Prop, PropsList } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class DropZoneDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Container</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <DropZone>
17
+
18
+ </DropZone>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">
23
+ The Container is a convenient layout component with different layout options and support for external CSS classes.
24
+ The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is
25
+ intended to be used with helper CSS classes to achieve desired styling options
26
+ </p>
27
+
28
+ <Markup.ReactMarkup>
29
+ <Markup.ReactMarkupPreview>
30
+ <p className="docs-page__paragraph">// Basic</p>
31
+ <div className='docs-page__content-row'>
32
+ <DropZone text="Drag one or more files here to upload them, or just click on the field.">
33
+ </DropZone>
34
+ </div>
35
+
36
+ <p className="docs-page__paragraph">// With heading</p>
37
+ <div className='docs-page__content-row'>
38
+ <DropZone heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">
39
+ </DropZone>
40
+ </div>
41
+
42
+ <p className="docs-page__paragraph">// With icon</p>
43
+ <div className='docs-page__content-row'>
44
+ <DropZone icon={true} text="Drag one or more files here to upload them, or just click on the field.">
45
+ </DropZone>
46
+ </div>
47
+
48
+ <p className="docs-page__paragraph">// With heading & icon</p>
49
+ <div className='docs-page__content-row'>
50
+ <DropZone icon={true} heading="Nothing here yet" text="Drag one or more files here to upload them, or just click on the field.">
51
+ </DropZone>
52
+ </div>
53
+
54
+ </Markup.ReactMarkupPreview>
55
+ <Markup.ReactMarkupCode>{`
56
+ // Basic
57
+
58
+ <Container>
59
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
60
+ </Container>
61
+
62
+ // Usage examples
63
+
64
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
65
+ <span>Curabitur blandit tempus porttitor.</span>
66
+ <Button text="Test button" type="primary" onClick={()=> false} />
67
+ <Button text="Test button" type="highlight" onClick={()=> false} />
68
+ <ButtonGroup align="end">
69
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
70
+ <Button text="Submit" onClick={()=> false} type="primary" />
71
+ </ButtonGroup>
72
+ </Container>
73
+
74
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
75
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
76
+ <Text color='light'>
77
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
78
+ </Text>
79
+ <ButtonGroup align="end">
80
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
81
+ <Button text="Submit" onClick={()=> false} type="primary" />
82
+ </ButtonGroup>
83
+ </Container>
84
+
85
+ <Container gap="large" theme='dark-ui' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
86
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
87
+ <Text color='light'>
88
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
89
+ </Text>
90
+ <ButtonGroup align="end">
91
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
92
+ <Button text="Submit" onClick={()=> false} type="primary" />
93
+ </ButtonGroup>
94
+ </Container>
95
+
96
+ `}
97
+ </Markup.ReactMarkupCode>
98
+ </Markup.ReactMarkup>
99
+
100
+ <h3 className="docs-page__h3">Props</h3>
101
+ <PropsList>
102
+ <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
103
+ <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
104
+ <Prop name='gap' isRequired={false} type='none | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
105
+ <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
106
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
107
+ </PropsList>
108
+ </section>
109
+ )
110
+ }
111
+ }
@@ -0,0 +1,104 @@
1
+ import * as React from 'react';
2
+
3
+ import * as Markup from '../../js/react';
4
+
5
+ import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
6
+ import { DurationInput } from '../../../app-typescript/components/DurationInput';
7
+
8
+ interface IState {
9
+ inlineLabel: boolean;
10
+ required: boolean;
11
+ disabled: boolean;
12
+ invalid: boolean;
13
+ }
14
+
15
+ export default class DurationInputDoc extends React.Component<{}, IState> {
16
+ constructor(props) {
17
+ super(props);
18
+ this.state = {
19
+ inlineLabel: false,
20
+ required: true,
21
+ disabled: false,
22
+ invalid: false,
23
+ }
24
+ }
25
+
26
+ render() {
27
+ return (
28
+ <section className='docs-page__container'>
29
+ <h2 className='docs-page__h2'>Duration Input</h2>
30
+ <Markup.ReactMarkupCodePreview>{`
31
+ <DurationInput
32
+ label='Label'
33
+ info='info message'
34
+ disabled={this.state.disabled}
35
+ required={this.state.required}
36
+ invalid={this.state.invalid}
37
+ inlineLabel={this.state.inlineLabel}
38
+ onChange={(e) => {
39
+ console.log(e)
40
+ }}
41
+ />
42
+ `}
43
+ </Markup.ReactMarkupCodePreview>
44
+ <p className='docs-page__paragraph'></p>
45
+ <Markup.ReactMarkup>
46
+ <Markup.ReactMarkupPreview>
47
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
48
+ <div className='form__row'>
49
+ <CheckGroup>
50
+ <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
51
+ <Checkbox checked={this.state.disabled} label={{text:'Disabled input'}} onChange={(value) => {this.setState({disabled: value})}} />
52
+ <Checkbox checked={this.state.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
53
+ <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
54
+ </CheckGroup>
55
+ </div>
56
+
57
+ <div className='form__row'>
58
+ <DurationInput
59
+ label='Label'
60
+ info='info message'
61
+ disabled={this.state.disabled}
62
+ required={this.state.required}
63
+ invalid={this.state.invalid}
64
+ inlineLabel={this.state.inlineLabel}
65
+ onChange={(e) => {
66
+ console.log(e)
67
+ }}
68
+ />
69
+ </div>
70
+ </div>
71
+
72
+ </Markup.ReactMarkupPreview>
73
+ <Markup.ReactMarkupCode>{`
74
+ <DurationInput
75
+ label='Label'
76
+ info='info message'
77
+ disabled={this.state.disabled}
78
+ required={this.state.required}
79
+ invalid={this.state.invalid}
80
+ inlineLabel={this.state.inlineLabel}
81
+ onChange={(e) => {
82
+ console.log(e)
83
+ }}
84
+ />
85
+ `}</Markup.ReactMarkupCode>
86
+ </Markup.ReactMarkup>
87
+
88
+ <h3 className='docs-page__h3'>Props</h3>
89
+ <PropsList>
90
+ <Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
91
+ <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
92
+ <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
93
+ <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
94
+ <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
95
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
96
+ <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
97
+ <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
98
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
99
+ <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
100
+ </PropsList>
101
+ </section>
102
+ )
103
+ }
104
+ }
@@ -0,0 +1,106 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Heading } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class HeadingDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Heading</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <Heading type='h2'>
17
+ Purus Dolor Ligula
18
+ </Heading>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered, preserving the semantcs.</p>
23
+
24
+ <Markup.ReactMarkup>
25
+ <Markup.ReactMarkupPreview>
26
+ <p className="docs-page__paragraph">// Basic</p>
27
+ <div className='docs-page__content-row'>
28
+ <Heading type='h1'>Heading one example</Heading>
29
+ </div>
30
+ <div className='docs-page__content-row'>
31
+ <Heading type='h2'>Heading two example</Heading>
32
+ </div>
33
+ <div className='docs-page__content-row'>
34
+ <Heading type='h3'>Heading three example</Heading>
35
+ </div>
36
+ <div className='docs-page__content-row'>
37
+ <Heading type='h4'>Heading four example</Heading>
38
+ </div>
39
+ <div className='docs-page__content-row'>
40
+ <Heading type='h5'>Heading five example</Heading>
41
+ </div>
42
+ <div className='docs-page__content-row'>
43
+ <Heading type='h6'>Heading six example</Heading>
44
+ </div>
45
+
46
+ <p className="docs-page__paragraph">// Variations</p>
47
+
48
+ <div className='docs-page__content-row'>
49
+ <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
50
+ Maecenas faucibus mollis interdum.
51
+ </Heading>
52
+ </div>
53
+ <div className='docs-page__content-row'>
54
+ <Heading type='h2' style='italic' align='end'>
55
+ Cras mattis consectetur purus sit amet fermentum.
56
+ </Heading>
57
+ </div>
58
+ <div className='docs-page__content-row'>
59
+ <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
60
+ Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
61
+ </Heading>
62
+ </div>
63
+
64
+ </Markup.ReactMarkupPreview>
65
+ <Markup.ReactMarkupCode>{`
66
+ // Basic
67
+
68
+ <Heading type='h1'>Heading one example</Heading>
69
+ <Heading type='h2'>Heading two example</Heading>
70
+ <Heading type='h3'>Heading three example</Heading>
71
+ <Heading type='h4'>Heading four example</Heading>
72
+ <Heading type='h5'>Heading five example</Heading>
73
+ <Heading type='h6'>Heading six example</Heading>
74
+
75
+ // Variations
76
+
77
+ <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
78
+ Maecenas faucibus mollis interdum.
79
+ </Heading>
80
+
81
+ <Heading type='h2' style='italic' align='end'>
82
+ Cras mattis consectetur purus sit amet fermentum.
83
+ </Heading>
84
+
85
+ <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
86
+ Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
87
+ </Heading>
88
+
89
+ `}
90
+ </Markup.ReactMarkupCode>
91
+ </Markup.ReactMarkup>
92
+
93
+ <h3 className="docs-page__h3">Props</h3>
94
+ <PropsList>
95
+ <Prop name='type' isRequired={true} type='h1 | h2 | h3 | h4 | h5 | h6' default='/' description='Heading type (eg. H1, H2, H3... etc.)'/>
96
+ <Prop name='weight' isRequired={false} type='normal | medium | strong' default='normal' description='Change the default font weight.'/>
97
+ <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
98
+ <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
99
+ <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between default sans (Roboto) and serif (Merriweather) font styles. '/>
100
+ <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
101
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
102
+ </PropsList>
103
+ </section>
104
+ )
105
+ }
106
+ }
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
4
 
5
- import { IconButton, Prop, PropsList, Tooltip } from '../../../app-typescript';
5
+ import { IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup } from '../../../app-typescript';
6
6
 
7
7
  export default class IconButtonDoc extends React.Component {
8
8
  render() {
@@ -20,38 +20,64 @@ export default class IconButtonDoc extends React.Component {
20
20
  <p className="docs-page__paragraph">// Default</p>
21
21
  <p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
22
22
  <div className="docs-page__content-row docs-page__content-row--white">
23
- <Tooltip text='I support tooltips!'>
24
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
25
- </Tooltip>
26
- <IconButton icon='plus-large' ariaValue='Add' onClick ={()=> false} />
23
+ <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
24
+ <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
27
25
  <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
28
26
  <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
29
- <Tooltip text='My tooltip is on the right.' flow='right'>
30
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
31
- </Tooltip>
27
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
32
28
  </div>
33
29
  <p className="docs-page__paragraph">// Small</p>
34
30
  <div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
35
- <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
31
+ <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
36
32
  <span className="sd-margin-x--auto"></span>
37
33
  <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
38
34
  </div>
35
+
36
+ <p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
37
+ <Container gap="large" className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3'>
38
+ <ButtonGroup align='center' spaces='loose'>
39
+ <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
40
+ <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
41
+ <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
42
+ </ButtonGroup>
43
+ </Container>
44
+
45
+ <p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
46
+ <p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
47
+ <div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
48
+ <ButtonGroup align='center' spaces='loose'>
49
+ <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
50
+ <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
51
+ <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
52
+ </ButtonGroup>
53
+ </div>
54
+
39
55
  </Markup.ReactMarkupPreview>
40
56
  <Markup.ReactMarkupCode>{`
41
- <Tooltip text='I support tooltips!'>
42
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
43
- </Tooltip>
44
- <IconButton icon='plus-large' ariaValue='plus' onClick ={()=> false} />
45
- <IconButton icon='dots-vertical' ariaValue='dots' onClick={()=> false} />
46
- <IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
47
- <Tooltip text='My tooltip is on right.' flow='right'>
48
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
49
- </Tooltip>
57
+ <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
58
+ <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
59
+ <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
60
+ <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
61
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
50
62
 
51
63
  // Small
52
- <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
64
+ <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
53
65
  ...
54
66
  <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
67
+
68
+ // Xtra large, 'outline' style
69
+ <ButtonGroup align='center' spaces='loose'>
70
+ <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
71
+ <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
72
+ <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
73
+ </ButtonGroup>
74
+
75
+ // Xtra large, outlineWhite style
76
+ <ButtonGroup align='center' spaces='loose'>
77
+ <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Edit metadata' onClick={()=> false} />
78
+ <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Edit image' onClick={()=> false} />
79
+ <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Edit crops' onClick={()=> false} />
80
+ </ButtonGroup>
55
81
  `}
56
82
  </Markup.ReactMarkupCode>
57
83
  </Markup.ReactMarkup>
@@ -59,8 +85,12 @@ export default class IconButtonDoc extends React.Component {
59
85
  <h3 className="docs-page__h3">Props</h3>
60
86
  <PropsList>
61
87
  <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
62
- <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
63
- <Prop name='size' isRequired={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
88
+ <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers, also used as the ToolTip value.'/>
89
+ <Prop name='size' isRequired={false} type='default | small | x-large' default='default' description='Creates an IconButton with a smaller or larger footprint.'/>
90
+ <Prop name='style' isRequired={false} type='default | outline | outlineWhite' default='default' description='Different styling options.'/>
91
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
92
+ <Prop name='toolTipFlow' isRequired={false} type='top | left | right | down' default='top' description='Defines the possition of the ToolTip.'/>
93
+ <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Uses the append to body version of the ToolTips if set to true.'/>
64
94
  </PropsList>
65
95
  </section>
66
96
  )
@@ -3,19 +3,20 @@ import * as Markup from "../../js/react";
3
3
 
4
4
  import { Icon, Prop, PropsList } from '../../../app-typescript';
5
5
 
6
+ //@ts-ignore
6
7
  import * as iconFont from '../../../app/styles/_icon-font.scss';
7
8
 
8
- export default class IconFontDoc extends React.PureComponent{
9
- render(){
9
+ export default class IconFontDoc extends React.PureComponent {
10
+ render() {
10
11
  const array = iconFont.icon.split(', ');
11
12
  const icons = array.map((icon, index) =>
12
13
  <li key={index}>
13
- <Icon name={icon}/>
14
+ <Icon name={icon} />
14
15
  <span>{icon}</span>
15
16
  </li>
16
- );
17
- return(
18
- <section className="docs-page__container">
17
+ );
18
+ return (
19
+ <section className="docs-page__container">
19
20
  <h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
20
21
  <Markup.ReactMarkupCodePreview>{`
21
22
  <Icon name="photo" />
@@ -27,12 +27,34 @@ export default class IconLabelDoc extends React.Component {
27
27
  <IconLabel text='Label sd-green' icon='video' type='sd-green' />
28
28
 
29
29
  <p className="docs-page__paragraph">// Translucent</p>
30
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
31
- <IconLabel style='translucent' text='Label warning' type='warning' icon='time' />
30
+ <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success' icon='time' />
31
+ <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning' icon='time' />
32
32
  <IconLabel style='translucent' text='Label alert' type='alert' icon='time' />
33
33
  <IconLabel style='translucent' text='Label highlight' type='highlight' icon='calendar' />
34
34
  <IconLabel style='translucent' text='Label sd-green' type='sd-green' icon='calendar' />
35
35
  <IconLabel style='translucent' text='Default label' icon='bell' />
36
+ <br />
37
+ <IconLabel innerLabel='Start:' style='translucent' text='00:45' type='success'/>
38
+ <IconLabel innerLabel='end:' style='translucent' text='00:30' type='warning'/>
39
+ <IconLabel style='translucent' text='Label alert' type='alert' />
40
+
41
+ <p className="docs-page__paragraph">// Translucent & Large</p>
42
+ <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:45' type='success' icon='time' />
43
+ <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:55' type='warning' icon='time' />
44
+ <IconLabel innerLabel='Start:' size='large' style='translucent' text='00:15' type='alert' icon='time' />
45
+ <br />
46
+ <IconLabel innerLabel='Start:' size='large' style='translucent' text='18:30' type='success' />
47
+ <IconLabel innerLabel='End:' size='large' style='translucent' text='20:30' type='highlight' />
48
+ <IconLabel innerLabel='Duration:' size='large' style='translucent' text='00:30' type='primary' />
49
+
50
+ <p className="docs-page__paragraph">// Translucent & Small</p>
51
+ <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:45' type='success' icon='time' />
52
+ <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:55' type='warning' icon='time' />
53
+ <IconLabel innerLabel='Start:' size='small' style='translucent' text='00:15' type='alert' icon='time' />
54
+ <br />
55
+ <IconLabel innerLabel='Start:' size='small' style='translucent' text='18:30' type='success' />
56
+ <IconLabel innerLabel='End:' size='small' style='translucent' text='20:30' type='highlight' />
57
+ <IconLabel innerLabel='Duration:' size='small' style='translucent' text='00:30' type='primary' />
36
58
  </div>
37
59
 
38
60
  </Markup.ReactMarkupPreview>
@@ -0,0 +1,65 @@
1
+ import * as React from "react";
2
+ import * as Markup from "../../js/react";
3
+ import { IconPicker, PropsList, Prop } from "../../../app-typescript";
4
+
5
+ const IconPickerDocs = () => {
6
+
7
+ const [value, setValue] = React.useState('amp');
8
+
9
+ return (
10
+ <section className="docs-page__container">
11
+ <h2 className="docs-page__h2">Icon Picker</h2>
12
+ <Markup.ReactMarkupCodePreview>{`
13
+ <IconPicker
14
+ label="Icon"
15
+ filterPlaceholder="Search..."
16
+ translateFunction={(text: string): string => text}
17
+ value={value}
18
+ onChange={(value) => {
19
+ setValue(value);
20
+ }}
21
+ />
22
+ `}
23
+ </Markup.ReactMarkupCodePreview>
24
+ <Markup.ReactMarkup>
25
+ <Markup.ReactMarkupPreview>
26
+ <IconPicker
27
+ label="Icon"
28
+ filterPlaceholder="Search..."
29
+ translateFunction={(text: string): string => text}
30
+ value={value}
31
+ onChange={(value) => {
32
+ setValue(value);
33
+ }}
34
+ />
35
+ </Markup.ReactMarkupPreview>
36
+ <Markup.ReactMarkupCode>{`
37
+
38
+ const [value, setValue] = React.useState("amp");
39
+ ...
40
+ <IconPicker
41
+ label="Icon"
42
+ filterPlaceholder="Search..."
43
+ translateFunction={(text: string): string => text}
44
+ value={value}
45
+ onChange={(value) => {
46
+ setValue(value);
47
+ }}
48
+ />
49
+ `}</Markup.ReactMarkupCode>
50
+ </Markup.ReactMarkup>
51
+
52
+ <h3 className="docs-page__h3">Props</h3>
53
+ <PropsList>
54
+ <Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
55
+ <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
56
+ <Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
57
+ <Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
58
+ <Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
59
+ </PropsList>
60
+
61
+ </section>
62
+ )
63
+ }
64
+
65
+ export default IconPickerDocs;