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,143 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Container, Text, Heading, Button, ButtonGroup } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class ContainerDoc 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
+ <Container>
17
+ Cum sociis natoque penatibus et magnis dis parturient...
18
+ </Container>
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
+ <Container>
33
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
34
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
35
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
36
+ sem lacinia quam venenatis vestibulum.
37
+ </Container>
38
+ </div>
39
+
40
+ <p className="docs-page__paragraph">// Usage examples</p>
41
+
42
+ <div className='docs-page__content-row'>
43
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
44
+ <span>Curabitur blandit tempus porttitor.</span>
45
+ <Button text="Test button" type="primary" onClick={()=> false} />
46
+ <Button text="Test button" type="highlight" onClick={()=> false} />
47
+ <ButtonGroup align="end">
48
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
49
+ <Button text="Submit" onClick={()=> false} type="primary" />
50
+ </ButtonGroup>
51
+ </Container>
52
+ </div>
53
+
54
+ <div className='docs-page__content-row'>
55
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
56
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
57
+ <Text color='light'>
58
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
59
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
60
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
61
+ posuere velit aliquet. Aenean eu leo quam.
62
+ </Text>
63
+ <ButtonGroup align="end">
64
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
65
+ <Button text="Submit" onClick={()=> false} type="primary" />
66
+ </ButtonGroup>
67
+ </Container>
68
+ </div>
69
+
70
+ <div className='docs-page__content-row'>
71
+ <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
72
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
73
+ <Text color='light'>
74
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
75
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
76
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
77
+ posuere velit aliquet. Aenean eu leo quam.
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
+ </div>
85
+
86
+ </Markup.ReactMarkupPreview>
87
+ <Markup.ReactMarkupCode>{`
88
+ // Basic
89
+
90
+ <Container>
91
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
92
+ </Container>
93
+
94
+ // Usage examples
95
+
96
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
97
+ <span>Curabitur blandit tempus porttitor.</span>
98
+ <Button text="Test button" type="primary" onClick={()=> false} />
99
+ <Button text="Test button" type="highlight" onClick={()=> false} />
100
+ <ButtonGroup align="end">
101
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
102
+ <Button text="Submit" onClick={()=> false} type="primary" />
103
+ </ButtonGroup>
104
+ </Container>
105
+
106
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
107
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
108
+ <Text color='light'>
109
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
110
+ </Text>
111
+ <ButtonGroup align="end">
112
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
113
+ <Button text="Submit" onClick={()=> false} type="primary" />
114
+ </ButtonGroup>
115
+ </Container>
116
+
117
+ <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
118
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
119
+ <Text color='light'>
120
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
121
+ </Text>
122
+ <ButtonGroup align="end">
123
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
124
+ <Button text="Submit" onClick={()=> false} type="primary" />
125
+ </ButtonGroup>
126
+ </Container>
127
+
128
+ `}
129
+ </Markup.ReactMarkupCode>
130
+ </Markup.ReactMarkup>
131
+
132
+ <h3 className="docs-page__h3">Props</h3>
133
+ <PropsList>
134
+ <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
135
+ <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
136
+ <Prop name='gap' isRequired={false} type='none | x-small | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
137
+ <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.'/>
138
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
139
+ </PropsList>
140
+ </section>
141
+ )
142
+ }
143
+ }
@@ -0,0 +1,286 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel } from '../../../app-typescript';
4
+ import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
5
+ import { ContentList, ContentListItem } from '../../../app-typescript/components/Lists/ContentList';
6
+
7
+ export default class ContentListDoc extends React.Component {
8
+ render() {
9
+ return (
10
+ <section className='docs-page__container'>
11
+ <h2 className='docs-page__h2'>ContentList</h2>
12
+
13
+ <Markup.ReactMarkupCodePreview>{`
14
+ <ContentList
15
+ items: [...]
16
+ />
17
+ `}
18
+ </Markup.ReactMarkupCodePreview>
19
+
20
+ <p className="docs-page__paragraph">...</p>
21
+
22
+ <Markup.ReactMarkup>
23
+ <Markup.ReactMarkupPreview>
24
+ <p className="docs-page__paragraph">// basic</p>
25
+
26
+ <ContentList
27
+ items={[
28
+ {
29
+ itemColum: [
30
+ {
31
+ itemRow: [{content:<>
32
+ <i className="icon-rundown"></i>
33
+ </>}],
34
+ border: true
35
+ },
36
+ {
37
+ itemRow: [
38
+ {
39
+ content:
40
+ <>
41
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
42
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
43
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
44
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
45
+ </>
46
+ },
47
+ {
48
+ content:
49
+ <>
50
+ <Label text='Marker' color='blue--800'/>
51
+ <span className='sd-list-item__compound-text'>
52
+ <span className='sd-list-item__text-label'>Template:</span>
53
+ <span>Marker Daily</span>
54
+ </span>
55
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
56
+ <Label style='translucent' text='In Progress' type='warning' />
57
+ </>
58
+ },
59
+ ],
60
+ fullwidth: true,
61
+ }
62
+ ],
63
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
64
+ loading: true,
65
+ },
66
+ {
67
+ itemColum: [
68
+ {
69
+ itemRow: [{content:<>
70
+ <i className="icon-rundown"></i>
71
+ </>}],
72
+ border: true
73
+ },
74
+ {
75
+ itemRow: [
76
+ {
77
+ content:
78
+ <>
79
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
80
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
81
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
82
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
83
+ </>
84
+ },
85
+ {
86
+ content:
87
+ <>
88
+ <Label text='Marker' color='blue--800'/>
89
+ <span className='sd-list-item__compound-text'>
90
+ <span className='sd-list-item__text-label'>Template:</span>
91
+ <span>Marker Daily</span>
92
+ </span>
93
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
94
+ <Label style='translucent' text='In Progress' type='warning' />
95
+ </>
96
+ },
97
+ ],
98
+ fullwidth: true,
99
+ }
100
+ ],
101
+ //locked: true,
102
+ selected: true,
103
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
104
+ },
105
+ {
106
+ itemColum: [
107
+ {
108
+ itemRow: [{content:<>
109
+ <i className="icon-rundown"></i>
110
+ </>}],
111
+ border: true
112
+ },
113
+ {
114
+ itemRow: [
115
+ {
116
+ content:
117
+ <>
118
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
119
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
120
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
121
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
122
+ </>
123
+ },
124
+ {
125
+ content:
126
+ <>
127
+ <Label text='Marker' color='blue--800'/>
128
+ <span className='sd-list-item__compound-text'>
129
+ <span className='sd-list-item__text-label'>Template:</span>
130
+ <span>Marker Daily</span>
131
+ </span>
132
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
133
+ <Label style='translucent' text='In Progress' type='warning' />
134
+ </>
135
+ },
136
+ ],
137
+ fullwidth: true,
138
+ }
139
+ ],
140
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
141
+ },
142
+ ]} />
143
+
144
+ </Markup.ReactMarkupPreview>
145
+ <Markup.ReactMarkupCode>{`
146
+ <ContentList
147
+ items={[
148
+ {
149
+ itemColum: [
150
+ {
151
+ itemRow: [{content:<>
152
+ <i className="icon-rundown"></i>
153
+ </>}],
154
+ border: true
155
+ },
156
+ {
157
+ itemRow: [
158
+ {
159
+ content:
160
+ <>
161
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
162
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
163
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
164
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
165
+ </>
166
+ },
167
+ {
168
+ content:
169
+ <>
170
+ <Label text='Marker' color='blue--800'/>
171
+ <span className='sd-list-item__compound-text'>
172
+ <span className='sd-list-item__text-label'>Template:</span>
173
+ <span>Marker Daily</span>
174
+ </span>
175
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
176
+ <Label style='translucent' text='In Progress' type='warning' />
177
+ </>
178
+ },
179
+ ],
180
+ fullwidth: true,
181
+ }
182
+ ],
183
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
184
+ },
185
+ {
186
+ itemColum: [
187
+ {
188
+ itemRow: [{content:<>
189
+ <i className="icon-rundown"></i>
190
+ </>}],
191
+ border: true
192
+ },
193
+ {
194
+ itemRow: [
195
+ {
196
+ content:
197
+ <>
198
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
199
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
200
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
201
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
202
+ </>
203
+ },
204
+ {
205
+ content:
206
+ <>
207
+ <Label text='Marker' color='blue--800'/>
208
+ <span className='sd-list-item__compound-text'>
209
+ <span className='sd-list-item__text-label'>Template:</span>
210
+ <span>Marker Daily</span>
211
+ </span>
212
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
213
+ <Label style='translucent' text='In Progress' type='warning' />
214
+ </>
215
+ },
216
+ ],
217
+ fullwidth: true,
218
+ }
219
+ ],
220
+ locked: true,
221
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
222
+ },
223
+ {
224
+ itemColum: [
225
+ {
226
+ itemRow: [{content:<>
227
+ <i className="icon-rundown"></i>
228
+ </>}],
229
+ border: true
230
+ },
231
+ {
232
+ itemRow: [
233
+ {
234
+ content:
235
+ <>
236
+ <span className="sd-list-item__slugline">19:00 – 19:45</span>
237
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
238
+ <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
239
+ <time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
240
+ </>
241
+ },
242
+ {
243
+ content:
244
+ <>
245
+ <Label text='Marker' color='blue--800'/>
246
+ <span className='sd-list-item__compound-text'>
247
+ <span className='sd-list-item__text-label'>Template:</span>
248
+ <span>Marker Daily</span>
249
+ </span>
250
+ <span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
251
+ <Label style='translucent' text='In Progress' type='warning' />
252
+ </>
253
+ },
254
+ ],
255
+ fullwidth: true,
256
+ }
257
+ ],
258
+ action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
259
+ },
260
+ ]} />
261
+ `}
262
+ </Markup.ReactMarkupCode>
263
+ </Markup.ReactMarkup>
264
+
265
+ <h3 className="docs-page__h3">Props</h3>
266
+ <p className="docs-page__paragraph">ContentList</p>
267
+ <PropsList>
268
+ <Prop name='items' isRequired={true} type='Array' default='compact' description='An array of object.'/>
269
+ </PropsList>
270
+ <p className="docs-page__paragraph">Items:</p>
271
+ <PropsList>
272
+ <Prop name='itemColum' isRequired={true} type='Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>' default='false' description='An array of objects for defining column of individual items.'/>
273
+ <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='On hover displays an additional menu.'/>
274
+ <Prop name='locked' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
275
+ <Prop name='activated' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
276
+ <Prop name='selected' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
277
+ <Prop name='archived' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
278
+ <Prop name='loading' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change state and change style.'/>
279
+ <Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
280
+ <Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
281
+ </PropsList>
282
+
283
+ </section>
284
+ )
285
+ }
286
+ }
@@ -0,0 +1,71 @@
1
+ import * as React from 'react';
2
+
3
+ import * as Markup from '../../js/react';
4
+
5
+ import { SubNav, NavButton, ButtonGroup, Tooltip, CreateButton, PropsList, Prop } from '../../../app-typescript';
6
+
7
+ export default class CreateButtonDoc extends React.Component {
8
+ render() {
9
+ return (
10
+ <section className='docs-page__container'>
11
+ <h2 className='docs-page__h2'>Navigation button</h2>
12
+ <p></p>
13
+ <Markup.ReactMarkupCodePreview>{`
14
+ <NavButton type='default' icon='home' onClick={()=> false} />
15
+ `}
16
+ </Markup.ReactMarkupCodePreview>
17
+
18
+ <Markup.ReactMarkup>
19
+ <Markup.ReactMarkupPreview>
20
+ <SubNav zIndex={2}>
21
+ <ButtonGroup align='start' spaces='no-space'>
22
+ <Tooltip text='Filters' flow='right'>
23
+ <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
24
+ </Tooltip>
25
+ <NavButton icon='search' text="Search" onClick={() => false} />
26
+ </ButtonGroup>
27
+ <ButtonGroup align='end' spaces='no-space'>
28
+ <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
29
+ <Tooltip text='More actions' flow='down'>
30
+ <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
31
+ </Tooltip>
32
+ <CreateButton ariaValue='Create' onClick={() => false} />
33
+ </ButtonGroup>
34
+ </SubNav>
35
+ </Markup.ReactMarkupPreview>
36
+ <Markup.ReactMarkupCode>{`
37
+ <SubNav zIndex={2}>
38
+ <ButtonGroup align='start' spaces='no-space'>
39
+ <Tooltip text='Filters' flow='right'>
40
+ <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
41
+ </Tooltip>
42
+ <NavButton icon='search' text="Search" onClick={() => false} />
43
+ </ButtonGroup>
44
+ <ButtonGroup align='end' spaces='no-space'>
45
+ <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
46
+ <Tooltip text='More actions' flow='down'>
47
+ <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
48
+ </Tooltip>
49
+ <Tooltip text='Send to / Publish' flow='left'>
50
+ <NavButton icon='expand-thin' text='Send to / Publish' type='highlight' onClick={() => false} />
51
+ </Tooltip>
52
+ </ButtonGroup>
53
+ </SubNav>
54
+ `}
55
+ </Markup.ReactMarkupCode>
56
+ </Markup.ReactMarkup>
57
+
58
+ <h3 className="docs-page__h3">Props</h3>
59
+ <PropsList>
60
+ <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
61
+ <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
62
+ <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
63
+ <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight | sd-green' default='default' description='Default + semantic colour variations (e.g. primary, success etc.).' />
64
+ <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
65
+ <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
66
+ <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
67
+ </PropsList>
68
+ </section>
69
+ );
70
+ }
71
+ }
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
- import {DatePicker, PropsList, Prop} from '../../../app-typescript';
4
+ import {DatePicker, PropsList, Prop, DatePickerISO} from '../../../app-typescript';
5
5
 
6
6
  class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
7
7
  constructor(props) {
@@ -14,11 +14,16 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
14
14
  render() {
15
15
  return (
16
16
  <DatePicker
17
- value={this.state.date}
18
- dateFormat="YYYY-MM-DD"
19
- onChange={(date) => {
20
- this.setState({date});
21
- }}
17
+ value={this.state.date}
18
+ dateFormat="YYYY-MM-DD"
19
+ onChange={(date) => {
20
+ this.setState({date});
21
+ }}
22
+ required
23
+ tabindex={1}
24
+ label={'This is Label'}
25
+ info={'This is info'}
26
+ error={'This is error'}
22
27
  />
23
28
  );
24
29
  }
@@ -43,6 +48,11 @@ export default class DatePickerDoc extends React.Component {
43
48
  onChange={(date) => {
44
49
  this.setState({date});
45
50
  }}
51
+ required
52
+ tabindex={1}
53
+ label={'This is Label'}
54
+ info={'This is info'}
55
+ error={'This is error'}
46
56
  />
47
57
  );
48
58
  }
@@ -53,6 +63,21 @@ export default class DatePickerDoc extends React.Component {
53
63
  <div className='docs-page__content-row'>
54
64
  <DatePickerExample />
55
65
  </div>
66
+
67
+ <p className="docs-page__paragraph">// DatePickerISO</p>
68
+ <div className='docs-page__content-row'>
69
+ <DatePickerISO
70
+ value={'2019-01-01'}
71
+ dateFormat="YYYY-MM-DD"
72
+ onChange={(date) => {
73
+ this.setState({date});
74
+ }}
75
+ tabindex={1}
76
+ label={'This is Label'}
77
+ info={'This is info'}
78
+ error={'This is error'}
79
+ />
80
+ </div>
56
81
  </Markup.ReactMarkupPreview>
57
82
  <Markup.ReactMarkupCode>{`
58
83
  <DatePicker