superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12

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 (679) hide show
  1. package/app/fonts/sd_big-icons.eot +0 -0
  2. package/app/fonts/sd_big-icons.svg +55 -53
  3. package/app/fonts/sd_big-icons.ttf +0 -0
  4. package/app/fonts/sd_big-icons.woff +0 -0
  5. package/app/fonts/sd_icons.eot +0 -0
  6. package/app/fonts/sd_icons.svg +15 -7
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/img/SD-logo.svg +52 -0
  10. package/app/img/dots.svg +3 -0
  11. package/app/img/spinner.svg +3 -0
  12. package/app/img/themes/theme-base.svg +1 -0
  13. package/app/img/themes/theme-contrast.svg +45 -0
  14. package/app/img/themes/theme-dark.svg +1 -0
  15. package/app/img/themes/theme-light.svg +1 -0
  16. package/app/index.js +1 -1
  17. package/app/scripts/modals.js +22 -9
  18. package/app/scripts/toggleBoxNext.js +1 -1
  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 +441 -333
  26. package/app/styles/_carousel.scss +17 -11
  27. package/app/styles/_content-divider.scss +63 -8
  28. package/app/styles/_design-tokens.scss +2 -0
  29. package/app/styles/_hamburger.scss +160 -0
  30. package/app/styles/_helpers.scss +221 -34
  31. package/app/styles/_icon-font.scss +351 -307
  32. package/app/styles/_icon-labels.scss +66 -10
  33. package/app/styles/_labels.scss +12 -7
  34. package/app/styles/_loaders.scss +13 -0
  35. package/app/styles/_master-desk.scss +8 -7
  36. package/app/styles/_mixins.scss +13 -3
  37. package/app/styles/_modals.scss +10 -31
  38. package/app/styles/_normalize.scss +5 -0
  39. package/app/styles/_panel-info.scss +19 -14
  40. package/app/styles/_sd-tag-input.scss +280 -219
  41. package/app/styles/_simple-list.scss +37 -17
  42. package/app/styles/_spinner.scss +46 -0
  43. package/app/styles/_table-list.scss +348 -0
  44. package/app/styles/_tabs.scss +6 -8
  45. package/app/styles/_tag-labels.scss +11 -2
  46. package/app/styles/_thumb-carousel.scss +11 -10
  47. package/app/styles/_toggle-box.scss +46 -12
  48. package/app/styles/_toggle-button.scss +42 -0
  49. package/app/styles/_tooltips.scss +3 -3
  50. package/app/styles/_variables.scss +0 -1
  51. package/app/styles/app.scss +15 -2
  52. package/app/styles/components/_card-item.scss +33 -21
  53. package/app/styles/components/_list-item.scss +63 -35
  54. package/app/styles/components/_sd-collapse-box.scss +6 -6
  55. package/app/styles/components/_sd-comment-box.scss +8 -4
  56. package/app/styles/components/_sd-dropzone.scss +114 -0
  57. package/app/styles/components/_sd-editor-popup.scss +4 -4
  58. package/app/styles/components/_sd-grid-item.scss +32 -18
  59. package/app/styles/components/_sd-media-carousel.scss +37 -2
  60. package/app/styles/components/_sd-notification-panel.scss +48 -0
  61. package/app/styles/components/_sd-photo-preview.scss +3 -3
  62. package/app/styles/components/_sd-searchbar.scss +12 -98
  63. package/app/styles/components/_subnav.scss +464 -435
  64. package/app/styles/components/_theme-selector.scss +189 -0
  65. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  66. package/app/styles/{variables → design-tokens}/_new-colors.scss +68 -30
  67. package/app/styles/dropdowns/_basic-dropdown.scss +36 -3
  68. package/app/styles/editor/_editor-buttons.scss +54 -0
  69. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  70. package/app/styles/form-elements/_checkbox.scss +85 -58
  71. package/app/styles/form-elements/_forms-general.scss +171 -21
  72. package/app/styles/form-elements/_input-wrap.scss +138 -0
  73. package/app/styles/form-elements/_inputs.scss +602 -104
  74. package/app/styles/form-elements/_select-grid.scss +79 -0
  75. package/app/styles/grids/_basic-grid.scss +52 -26
  76. package/app/styles/grids/_grid-layout.scss +207 -66
  77. package/app/styles/grids/_layout-grid.scss +4 -4
  78. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  79. package/app/styles/interface-elements/_side-panel.scss +88 -59
  80. package/app/styles/layout/_basic-layout.scss +3 -6
  81. package/app/styles/layout/_container.scss +35 -0
  82. package/app/styles/layout/_editor.scss +404 -0
  83. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  84. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  85. package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
  86. package/app/styles/menus/_sd-top-menu.scss +19 -5
  87. package/app/styles/pr-superdesk-theme.scss +3 -0
  88. package/app/styles/primereact/_pr-datepicker.scss +62 -9
  89. package/app/styles/primereact/_pr-dialog.scss +44 -7
  90. package/app/styles/primereact/_pr-dropdown.scss +170 -7
  91. package/app/styles/primereact/_pr-general.scss +4 -0
  92. package/app/styles/primereact/_pr-menu.scss +6 -5
  93. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  94. package/app/styles/variables/_colors.scss +23 -473
  95. package/app/styles/variables/_dimensions.scss +85 -1
  96. package/app/styles/variables/_form-elements.scss +0 -2
  97. package/app-typescript/components/Alert.tsx +16 -1
  98. package/app-typescript/components/Avatar.tsx +21 -0
  99. package/app-typescript/components/Badge.tsx +3 -2
  100. package/app-typescript/components/Button.tsx +7 -1
  101. package/app-typescript/components/ButtonGroup.tsx +5 -4
  102. package/app-typescript/components/Carousel.tsx +1 -1
  103. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  104. package/app-typescript/components/CheckGroup.tsx +2 -1
  105. package/app-typescript/components/Checkbox.tsx +7 -3
  106. package/app-typescript/components/CheckboxButton.tsx +9 -2
  107. package/app-typescript/components/ContentDivider.tsx +3 -0
  108. package/app-typescript/components/CreateButton.tsx +38 -0
  109. package/app-typescript/components/DatePicker.tsx +77 -38
  110. package/app-typescript/components/DonutChart.tsx +1 -1
  111. package/app-typescript/components/DropZone.tsx +89 -0
  112. package/app-typescript/components/Dropdown.tsx +133 -80
  113. package/app-typescript/components/DurationInput.tsx +400 -0
  114. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  115. package/app-typescript/components/EmptyState.tsx +2 -1
  116. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  117. package/app-typescript/components/Form/FormItem.tsx +20 -0
  118. package/app-typescript/components/Form/FormLabel.tsx +29 -0
  119. package/app-typescript/components/Form/FormRow.tsx +40 -0
  120. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  121. package/app-typescript/components/Form/FormText.tsx +15 -0
  122. package/app-typescript/components/Form/InputBase.tsx +95 -0
  123. package/app-typescript/components/Form/InputNew.tsx +107 -0
  124. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  125. package/app-typescript/components/Form/index.tsx +9 -0
  126. package/app-typescript/components/Icon.tsx +4 -2
  127. package/app-typescript/components/IconButton.tsx +30 -12
  128. package/app-typescript/components/IconLabel.tsx +8 -1
  129. package/app-typescript/components/IconPicker.tsx +277 -0
  130. package/app-typescript/components/Input.tsx +67 -35
  131. package/app-typescript/components/Label.tsx +65 -10
  132. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  134. package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
  135. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  136. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  137. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  138. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
  141. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  142. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  143. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  144. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  145. package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
  146. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  147. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  148. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  149. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  150. package/app-typescript/components/Layouts/Container.tsx +30 -0
  151. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  152. package/app-typescript/components/Layouts/CoreLayout.tsx +63 -0
  153. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  154. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  155. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +22 -0
  156. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  157. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  158. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  159. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  160. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  161. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  162. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  163. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  164. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  165. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  166. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  167. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  168. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  169. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  170. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  171. package/app-typescript/components/Layouts/index.tsx +43 -0
  172. package/app-typescript/components/LeftMenu.tsx +116 -31
  173. package/app-typescript/components/ListItemLoader.tsx +30 -0
  174. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  175. package/app-typescript/components/Lists/ContentList.tsx +133 -0
  176. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  177. package/app-typescript/components/Lists/TableList.tsx +405 -0
  178. package/app-typescript/components/Lists/index.tsx +2 -0
  179. package/app-typescript/components/Menu.tsx +33 -9
  180. package/app-typescript/components/Modal.tsx +31 -18
  181. package/app-typescript/components/MultiSelect.tsx +99 -0
  182. package/app-typescript/components/NavButton.tsx +6 -1
  183. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  184. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  185. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  186. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  187. package/app-typescript/components/Navigation/index.tsx +3 -0
  188. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  189. package/app-typescript/components/RadioGroup.tsx +69 -0
  190. package/app-typescript/components/SearchBar.tsx +106 -0
  191. package/app-typescript/components/Select.tsx +31 -31
  192. package/app-typescript/components/SelectGrid.tsx +233 -0
  193. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  194. package/app-typescript/components/SidebarMenu.tsx +68 -0
  195. package/app-typescript/components/Skeleton.tsx +48 -0
  196. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  197. package/app-typescript/components/Spacer.tsx +87 -0
  198. package/app-typescript/components/Spinner.tsx +32 -0
  199. package/app-typescript/components/SubNav.tsx +25 -4
  200. package/app-typescript/components/Switch.tsx +34 -12
  201. package/app-typescript/components/SwitchGroup.tsx +2 -1
  202. package/app-typescript/components/Tag.tsx +31 -7
  203. package/app-typescript/components/Text/Heading.tsx +67 -0
  204. package/app-typescript/components/Text/Text.tsx +36 -0
  205. package/app-typescript/components/Text/Time.tsx +34 -0
  206. package/app-typescript/components/ThemeSelector.tsx +113 -0
  207. package/app-typescript/components/TimePicker.tsx +38 -15
  208. package/app-typescript/components/Togglebox.tsx +9 -7
  209. package/app-typescript/components/Tooltip.tsx +7 -5
  210. package/app-typescript/components/TreeSelect.tsx +664 -0
  211. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  212. package/app-typescript/helpers.tsx +3 -0
  213. package/app-typescript/index.ts +30 -3
  214. package/dist/SD-logo.svg +52 -0
  215. package/dist/avatar-2.jpg +0 -0
  216. package/dist/avatar-3.jpg +0 -0
  217. package/dist/avatar-4.jpg +0 -0
  218. package/dist/avatar-5.jpg +0 -0
  219. package/dist/avatar-6.jpg +0 -0
  220. package/dist/components/basic-grid.html +1 -1
  221. package/dist/components/checkbox.html +1 -1
  222. package/dist/components/modals.html +1 -0
  223. package/dist/dots.svg +3 -0
  224. package/dist/examples.bundle.css +8916 -1617
  225. package/dist/examples.bundle.js +99314 -71560
  226. package/dist/playgrounds/accessible-theme-test.html +1 -1
  227. package/dist/playgrounds/boxed-list.html +1 -1
  228. package/dist/playgrounds/cards.html +9 -4
  229. package/dist/playgrounds/editor-3-test.html +15 -0
  230. package/dist/playgrounds/form-layout.html +9 -7
  231. package/dist/playgrounds/layout-test-2.html +1 -1
  232. package/dist/playgrounds/list-item-test.html +1 -1
  233. package/dist/playgrounds/master-desk.html +2 -4
  234. package/dist/playgrounds/media-carousel.html +1 -1
  235. package/dist/playgrounds/photo-desk.html +1 -1
  236. package/dist/playgrounds/planning.html +1 -1
  237. package/dist/playgrounds/publish.html +1 -1
  238. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  239. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  240. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  241. package/dist/playgrounds/publisher-content-lists.html +1 -1
  242. package/dist/playgrounds/publisher-dashboard.html +1 -1
  243. package/dist/playgrounds/publisher-output-control.html +1 -1
  244. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  245. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  246. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  247. package/dist/playgrounds/react-playgrounds/Index.tsx +8 -1
  248. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  249. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  250. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  251. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  252. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  253. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  254. package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  255. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  256. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  257. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  258. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  259. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  260. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  261. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  262. package/dist/playgrounds/swimlane-view.html +1 -1
  263. package/dist/playgrounds/toasts.html +1 -1
  264. package/dist/playgrounds/video-editor.html +1 -1
  265. package/dist/react/Alerts.tsx +91 -18
  266. package/dist/react/Avatar.tsx +314 -127
  267. package/dist/react/Badges.tsx +18 -0
  268. package/dist/react/BoxedList.tsx +362 -0
  269. package/dist/react/ButtonGroups.tsx +66 -65
  270. package/dist/react/Buttons.tsx +65 -113
  271. package/dist/react/Carousel.tsx +2 -3
  272. package/dist/react/Checkboxs.tsx +66 -25
  273. package/dist/react/Container.tsx +143 -0
  274. package/dist/react/ContentDivider.tsx +22 -18
  275. package/dist/react/ContentList.tsx +462 -0
  276. package/dist/react/CreateButton.tsx +71 -0
  277. package/dist/react/DatePicker.tsx +31 -6
  278. package/dist/react/DropZone.tsx +111 -0
  279. package/dist/react/Dropdowns.tsx +580 -48
  280. package/dist/react/DurationInput.tsx +108 -0
  281. package/dist/react/Heading.tsx +106 -0
  282. package/dist/react/IconButtons.tsx +51 -21
  283. package/dist/react/IconFont.tsx +7 -6
  284. package/dist/react/IconLabels.tsx +24 -2
  285. package/dist/react/IconPicker.tsx +65 -0
  286. package/dist/react/Index.tsx +125 -19
  287. package/dist/react/Inputs.tsx +289 -6
  288. package/dist/react/Labels.tsx +51 -1
  289. package/dist/react/LeftNavigations.tsx +194 -15
  290. package/dist/react/ListItems.tsx +34 -0
  291. package/dist/react/Modal.tsx +8 -7
  292. package/dist/react/MultiSelect.tsx +201 -0
  293. package/dist/react/NavButtons.tsx +35 -5
  294. package/dist/react/Panel.tsx +366 -0
  295. package/dist/react/QuickNavigationBar.tsx +142 -0
  296. package/dist/react/RadioGroup.tsx +351 -0
  297. package/dist/react/SelectGrid.tsx +121 -0
  298. package/dist/react/SelectWithTemplate.tsx +6 -1
  299. package/dist/react/Selects.tsx +57 -0
  300. package/dist/react/SimpleList.tsx +148 -0
  301. package/dist/react/SubNav.tsx +65 -18
  302. package/dist/react/TableList.tsx +161 -0
  303. package/dist/react/Tags.tsx +57 -5
  304. package/dist/react/Text.tsx +134 -0
  305. package/dist/react/TimePicker.tsx +22 -12
  306. package/dist/react/Togglebox.tsx +1 -1
  307. package/dist/react/TreeSelect.tsx +422 -0
  308. package/dist/react/WithSizeObserver.tsx +44 -0
  309. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  310. package/dist/react/tree-select/example-1.tsx +71 -0
  311. package/dist/react/tree-select/example-2.tsx +59 -0
  312. package/dist/react.html +4 -0
  313. package/dist/sd_big-icons.eot +0 -0
  314. package/dist/sd_big-icons.svg +55 -53
  315. package/dist/sd_big-icons.ttf +0 -0
  316. package/dist/sd_big-icons.woff +0 -0
  317. package/dist/sd_icons.eot +0 -0
  318. package/dist/sd_icons.svg +15 -7
  319. package/dist/sd_icons.ttf +0 -0
  320. package/dist/sd_icons.woff +0 -0
  321. package/dist/superdesk-ui.bundle.css +55688 -25164
  322. package/dist/superdesk-ui.bundle.js +89363 -66822
  323. package/dist/vendor.bundle.js +25685 -25663
  324. package/examples/css/docs-page.css +103 -33
  325. package/examples/img/avatar-2.jpg +0 -0
  326. package/examples/img/avatar-3.jpg +0 -0
  327. package/examples/img/avatar-4.jpg +0 -0
  328. package/examples/img/avatar-5.jpg +0 -0
  329. package/examples/img/avatar-6.jpg +0 -0
  330. package/examples/index.js +32 -0
  331. package/examples/pages/components/basic-grid.html +1 -1
  332. package/examples/pages/components/checkbox.html +1 -1
  333. package/examples/pages/components/modals.html +1 -0
  334. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  335. package/examples/pages/playgrounds/boxed-list.html +1 -1
  336. package/examples/pages/playgrounds/cards.html +9 -4
  337. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  338. package/examples/pages/playgrounds/form-layout.html +9 -7
  339. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  340. package/examples/pages/playgrounds/list-item-test.html +1 -1
  341. package/examples/pages/playgrounds/master-desk.html +2 -4
  342. package/examples/pages/playgrounds/media-carousel.html +1 -1
  343. package/examples/pages/playgrounds/photo-desk.html +1 -1
  344. package/examples/pages/playgrounds/planning.html +1 -1
  345. package/examples/pages/playgrounds/publish.html +1 -1
  346. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  347. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  348. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  349. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  350. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  351. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  352. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  353. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  354. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  355. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +8 -1
  356. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  357. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  358. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  359. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  360. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  361. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +22 -13
  362. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  363. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  364. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  365. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  366. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  367. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +2 -2
  368. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  369. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  370. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  371. package/examples/pages/playgrounds/toasts.html +1 -1
  372. package/examples/pages/playgrounds/video-editor.html +1 -1
  373. package/examples/pages/react/Alerts.tsx +91 -18
  374. package/examples/pages/react/Avatar.tsx +314 -127
  375. package/examples/pages/react/Badges.tsx +18 -0
  376. package/examples/pages/react/BoxedList.tsx +362 -0
  377. package/examples/pages/react/ButtonGroups.tsx +66 -65
  378. package/examples/pages/react/Buttons.tsx +65 -113
  379. package/examples/pages/react/Carousel.tsx +2 -3
  380. package/examples/pages/react/Checkboxs.tsx +66 -25
  381. package/examples/pages/react/Container.tsx +143 -0
  382. package/examples/pages/react/ContentDivider.tsx +22 -18
  383. package/examples/pages/react/ContentList.tsx +462 -0
  384. package/examples/pages/react/CreateButton.tsx +71 -0
  385. package/examples/pages/react/DatePicker.tsx +31 -6
  386. package/examples/pages/react/DropZone.tsx +111 -0
  387. package/examples/pages/react/Dropdowns.tsx +580 -48
  388. package/examples/pages/react/DurationInput.tsx +108 -0
  389. package/examples/pages/react/Heading.tsx +106 -0
  390. package/examples/pages/react/IconButtons.tsx +51 -21
  391. package/examples/pages/react/IconFont.tsx +7 -6
  392. package/examples/pages/react/IconLabels.tsx +24 -2
  393. package/examples/pages/react/IconPicker.tsx +65 -0
  394. package/examples/pages/react/Index.tsx +125 -19
  395. package/examples/pages/react/Inputs.tsx +289 -6
  396. package/examples/pages/react/Labels.tsx +51 -1
  397. package/examples/pages/react/LeftNavigations.tsx +194 -15
  398. package/examples/pages/react/ListItems.tsx +34 -0
  399. package/examples/pages/react/Modal.tsx +8 -7
  400. package/examples/pages/react/MultiSelect.tsx +201 -0
  401. package/examples/pages/react/NavButtons.tsx +35 -5
  402. package/examples/pages/react/Panel.tsx +366 -0
  403. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  404. package/examples/pages/react/RadioGroup.tsx +351 -0
  405. package/examples/pages/react/SelectGrid.tsx +121 -0
  406. package/examples/pages/react/SelectWithTemplate.tsx +6 -1
  407. package/examples/pages/react/Selects.tsx +57 -0
  408. package/examples/pages/react/SimpleList.tsx +148 -0
  409. package/examples/pages/react/SubNav.tsx +65 -18
  410. package/examples/pages/react/TableList.tsx +161 -0
  411. package/examples/pages/react/Tags.tsx +57 -5
  412. package/examples/pages/react/Text.tsx +134 -0
  413. package/examples/pages/react/TimePicker.tsx +22 -12
  414. package/examples/pages/react/Togglebox.tsx +1 -1
  415. package/examples/pages/react/TreeSelect.tsx +422 -0
  416. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  417. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  418. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  419. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  420. package/examples/pages/react.html +4 -0
  421. package/package.json +16 -11
  422. package/react/components/Alert.d.ts +3 -0
  423. package/react/components/Alert.js +17 -7
  424. package/react/components/Autocomplete.js +16 -12
  425. package/react/components/Avatar.d.ts +9 -0
  426. package/react/components/Avatar.js +24 -4
  427. package/react/components/Badge.d.ts +1 -0
  428. package/react/components/Badge.js +9 -7
  429. package/react/components/Button.d.ts +2 -0
  430. package/react/components/Button.js +12 -8
  431. package/react/components/ButtonGroup.d.ts +3 -2
  432. package/react/components/ButtonGroup.js +9 -7
  433. package/react/components/Carousel.js +5 -3
  434. package/react/components/CheckButtonGroup.d.ts +3 -1
  435. package/react/components/CheckButtonGroup.js +14 -6
  436. package/react/components/CheckGroup.d.ts +1 -0
  437. package/react/components/CheckGroup.js +6 -4
  438. package/react/components/Checkbox.d.ts +2 -1
  439. package/react/components/Checkbox.js +7 -5
  440. package/react/components/CheckboxButton.d.ts +1 -0
  441. package/react/components/CheckboxButton.js +8 -6
  442. package/react/components/ContentDivider.d.ts +1 -0
  443. package/react/components/ContentDivider.js +10 -6
  444. package/react/components/CreateButton.d.ts +17 -0
  445. package/react/components/CreateButton.js +68 -0
  446. package/react/components/DatePicker.d.ts +11 -0
  447. package/react/components/DatePicker.js +45 -31
  448. package/react/components/Divider.js +6 -4
  449. package/react/components/DonutChart.d.ts +1 -1
  450. package/react/components/DonutChart.js +24 -6
  451. package/react/components/DropZone.d.ts +25 -0
  452. package/react/components/DropZone.js +95 -0
  453. package/react/components/Dropdown.d.ts +7 -5
  454. package/react/components/Dropdown.js +64 -36
  455. package/react/components/DropdownFirst.js +18 -11
  456. package/react/components/DurationInput.d.ts +42 -0
  457. package/react/components/DurationInput.js +364 -0
  458. package/react/components/EmptyState.d.ts +1 -0
  459. package/react/components/EmptyState.js +8 -6
  460. package/react/components/Form/FormGroup.d.ts +13 -0
  461. package/react/components/Form/FormGroup.js +63 -0
  462. package/react/components/Form/FormItem.d.ts +9 -0
  463. package/react/components/Form/FormItem.js +56 -0
  464. package/react/components/Form/FormLabel.d.ts +13 -0
  465. package/react/components/Form/FormLabel.js +62 -0
  466. package/react/components/Form/FormRow.d.ts +17 -0
  467. package/react/components/Form/FormRow.js +64 -0
  468. package/react/components/Form/FormRowNew.d.ts +12 -0
  469. package/react/components/Form/FormRowNew.js +67 -0
  470. package/react/components/Form/FormText.d.ts +8 -0
  471. package/react/components/Form/FormText.js +49 -0
  472. package/react/components/Form/InputBase.d.ts +41 -0
  473. package/react/components/Form/InputBase.js +86 -0
  474. package/react/components/Form/InputNew.d.ts +45 -0
  475. package/react/components/Form/InputNew.js +75 -0
  476. package/react/components/Form/InputWrapper.d.ts +28 -0
  477. package/react/components/Form/InputWrapper.js +91 -0
  478. package/react/components/Form/index.d.ts +9 -0
  479. package/react/components/Form/index.js +21 -0
  480. package/react/components/FormLabel.js +5 -3
  481. package/react/components/GridItem.js +9 -7
  482. package/react/components/GridList.js +8 -6
  483. package/react/components/HeadingText.js +4 -2
  484. package/react/components/HelloWorld.js +4 -2
  485. package/react/components/Icon.d.ts +2 -1
  486. package/react/components/Icon.js +9 -6
  487. package/react/components/IconButton.d.ts +9 -2
  488. package/react/components/IconButton.js +17 -7
  489. package/react/components/IconLabel.d.ts +2 -0
  490. package/react/components/IconLabel.js +12 -7
  491. package/react/components/IconPicker.d.ts +24 -0
  492. package/react/components/IconPicker.js +287 -0
  493. package/react/components/Input.d.ts +25 -3
  494. package/react/components/Input.js +22 -26
  495. package/react/components/Label.d.ts +2 -0
  496. package/react/components/Label.js +44 -11
  497. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  498. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  499. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  500. package/react/components/Layouts/AuthoringContainer.js +60 -0
  501. package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
  502. package/react/components/Layouts/AuthoringFrame.js +58 -0
  503. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  504. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  505. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  506. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  507. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  508. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  509. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  510. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  511. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  512. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  513. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
  514. package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
  515. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  516. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  517. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  518. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  519. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  520. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  521. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  522. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  523. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  524. package/react/components/Layouts/AuthoringMain.js +55 -0
  525. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  526. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  527. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  528. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  529. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  530. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  531. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  532. package/react/components/Layouts/BottomBarAction.js +59 -0
  533. package/react/components/Layouts/Container.d.ts +14 -0
  534. package/react/components/Layouts/Container.js +62 -0
  535. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  536. package/react/components/Layouts/ContentSplitter.js +58 -0
  537. package/react/components/Layouts/CoreLayout.d.ts +20 -0
  538. package/react/components/Layouts/CoreLayout.js +55 -0
  539. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  540. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  541. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  542. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  543. package/react/components/Layouts/CoreLayoutMain.d.ts +10 -0
  544. package/react/components/Layouts/CoreLayoutMain.js +56 -0
  545. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  546. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  547. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  548. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  549. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  550. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  551. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  552. package/react/components/Layouts/HamburgerButton.js +63 -0
  553. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  554. package/react/components/Layouts/HeaderPanel.js +49 -0
  555. package/react/components/Layouts/Layout.d.ts +8 -0
  556. package/react/components/Layouts/Layout.js +36 -0
  557. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  558. package/react/components/Layouts/LayoutContainer.js +49 -0
  559. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  560. package/react/components/Layouts/LeftPanel.js +56 -0
  561. package/react/components/Layouts/MainMenu.d.ts +41 -0
  562. package/react/components/Layouts/MainMenu.js +103 -0
  563. package/react/components/Layouts/MainPanel.d.ts +11 -0
  564. package/react/components/Layouts/MainPanel.js +59 -0
  565. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  566. package/react/components/Layouts/NotificationPanel.js +110 -0
  567. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  568. package/react/components/Layouts/OverlayPanel.js +51 -0
  569. package/react/components/Layouts/PageLayout.d.ts +16 -0
  570. package/react/components/Layouts/PageLayout.js +66 -0
  571. package/react/components/Layouts/Panel.d.ts +66 -0
  572. package/react/components/Layouts/Panel.js +168 -0
  573. package/react/components/Layouts/RightPanel.d.ts +9 -0
  574. package/react/components/Layouts/RightPanel.js +49 -0
  575. package/react/components/Layouts/index.d.ts +39 -0
  576. package/react/components/Layouts/index.js +86 -0
  577. package/react/components/LeftMenu.d.ts +13 -4
  578. package/react/components/LeftMenu.js +71 -18
  579. package/react/components/ListItemLoader.d.ts +4 -0
  580. package/react/components/ListItemLoader.js +64 -0
  581. package/react/components/Lists/BoxedList.d.ts +44 -0
  582. package/react/components/Lists/BoxedList.js +160 -0
  583. package/react/components/Lists/ContentList.d.ts +51 -0
  584. package/react/components/Lists/ContentList.js +110 -0
  585. package/react/components/Lists/SimpleList.d.ts +21 -0
  586. package/react/components/Lists/SimpleList.js +80 -0
  587. package/react/components/Lists/TableList.d.ts +64 -0
  588. package/react/components/Lists/TableList.js +240 -0
  589. package/react/components/Lists/index.d.ts +2 -0
  590. package/react/components/Lists/index.js +10 -0
  591. package/react/components/Loader.js +4 -2
  592. package/react/components/Menu.d.ts +2 -1
  593. package/react/components/Menu.js +48 -12
  594. package/react/components/Modal.d.ts +4 -1
  595. package/react/components/Modal.js +35 -6
  596. package/react/components/MultiSelect.d.ts +40 -0
  597. package/react/components/MultiSelect.js +70 -0
  598. package/react/components/NavButton.d.ts +2 -1
  599. package/react/components/NavButton.js +9 -4
  600. package/react/components/Navigation/BottomNav.d.ts +24 -0
  601. package/react/components/Navigation/BottomNav.js +88 -0
  602. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  603. package/react/components/Navigation/QuickNavBar.js +117 -0
  604. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  605. package/react/components/Navigation/SideBarMenu.js +79 -0
  606. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  607. package/react/components/Navigation/SideBarTabs.js +88 -0
  608. package/react/components/Navigation/index.d.ts +3 -0
  609. package/react/components/Navigation/index.js +9 -0
  610. package/react/components/Popover.js +4 -2
  611. package/react/components/PropsList.js +4 -2
  612. package/react/components/RadioButtonGroup.d.ts +29 -0
  613. package/react/components/RadioButtonGroup.js +91 -0
  614. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  615. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  616. package/react/components/SearchBar.d.ts +24 -0
  617. package/react/components/SearchBar.js +113 -0
  618. package/react/components/Select.d.ts +9 -2
  619. package/react/components/Select.js +9 -20
  620. package/react/components/SelectGrid.d.ts +45 -0
  621. package/react/components/SelectGrid.js +200 -0
  622. package/react/components/SelectWithTemplate.d.ts +11 -1
  623. package/react/components/SelectWithTemplate.js +23 -12
  624. package/react/components/Skeleton.d.ts +30 -0
  625. package/react/components/Skeleton.js +76 -0
  626. package/react/components/SlidingToolbar.d.ts +1 -1
  627. package/react/components/SlidingToolbar.js +15 -3
  628. package/react/components/Spinner.d.ts +11 -0
  629. package/react/components/Spinner.js +71 -0
  630. package/react/components/StrechBar.js +4 -2
  631. package/react/components/SubNav.d.ts +8 -1
  632. package/react/components/SubNav.js +28 -8
  633. package/react/components/Switch.d.ts +4 -1
  634. package/react/components/Switch.js +25 -11
  635. package/react/components/SwitchGroup.d.ts +1 -0
  636. package/react/components/SwitchGroup.js +6 -4
  637. package/react/components/TabCustom.d.ts +0 -1
  638. package/react/components/TabCustom.js +11 -7
  639. package/react/components/TabList.js +6 -4
  640. package/react/components/Tag.d.ts +3 -2
  641. package/react/components/Tag.js +21 -9
  642. package/react/components/TagInput.d.ts +0 -1
  643. package/react/components/TagInput.js +7 -6
  644. package/react/components/TagInputTest.js +13 -9
  645. package/react/components/Text/Heading.d.ts +15 -0
  646. package/react/components/Text/Heading.js +79 -0
  647. package/react/components/Text/Text.d.ts +15 -0
  648. package/react/components/Text/Text.js +67 -0
  649. package/react/components/Text/Time.d.ts +15 -0
  650. package/react/components/Text/Time.js +65 -0
  651. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  652. package/react/components/ThemeSelector.js +114 -0
  653. package/react/components/TimePicker.d.ts +11 -1
  654. package/react/components/TimePicker.js +14 -5
  655. package/react/components/Toast.js +1 -1
  656. package/react/components/ToastMessage.js +6 -5
  657. package/react/components/ToastText.js +1 -1
  658. package/react/components/ToastWrapper.d.ts +2 -2
  659. package/react/components/ToastWrapper.js +14 -10
  660. package/react/components/Togglebox.d.ts +2 -1
  661. package/react/components/Togglebox.js +42 -14
  662. package/react/components/Tooltip.d.ts +1 -0
  663. package/react/components/Tooltip.js +14 -10
  664. package/react/components/TreeSelect.d.ts +82 -0
  665. package/react/components/TreeSelect.js +521 -0
  666. package/react/components/WithSizeObserver.d.ts +25 -0
  667. package/react/components/WithSizeObserver.js +95 -0
  668. package/react/components/_Positioner.js +4 -2
  669. package/react/helpers.d.ts +1 -0
  670. package/react/helpers.js +7 -0
  671. package/react/index.d.ts +28 -3
  672. package/react/index.js +66 -4
  673. package/app/styles/variables/_design-tokens-general.scss +0 -136
  674. package/app-typescript/components/Radio.tsx +0 -57
  675. package/app-typescript/components/RadioButton.tsx +0 -57
  676. package/dist/react/Radios.tsx +0 -391
  677. package/examples/pages/react/Radios.tsx +0 -391
  678. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  679. package/react/components/RadioButton.js +0 -65
@@ -0,0 +1,148 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { SimpleList, SimpleListItem, Label, Badge, Icon, IconButton, ButtonGroup, Text, Heading, Prop, PropsList } from '../../../app-typescript';
4
+
5
+ export default class SimpleListDoc extends React.Component {
6
+ render() {
7
+ return (
8
+ <section className='docs-page__container'>
9
+ <h2 className='docs-page__h2'>SimpleList</h2>
10
+
11
+ <Markup.ReactMarkupCodePreview>{`
12
+ <SimpleList>
13
+ <SimpleListItem>...</SimpleListItem>
14
+ </SimpleList>
15
+ `}
16
+ </Markup.ReactMarkupCodePreview>
17
+
18
+ <p className="docs-page__paragraph">...</p>
19
+
20
+ <Markup.ReactMarkup>
21
+ <Markup.ReactMarkupPreview>
22
+ <p className="docs-page__paragraph">// no border / compact (default)</p>
23
+ <SimpleList>
24
+ <SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
25
+ <SimpleListItem>Donec sed odio dui.</SimpleListItem>
26
+ <SimpleListItem>Etiam porta sem malesuada magna mollis euismod.</SimpleListItem>
27
+ <SimpleListItem>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</SimpleListItem>
28
+ </SimpleList>
29
+ <p className="docs-page__paragraph">// border / space-between</p>
30
+ <SimpleList border={true}>
31
+ <SimpleListItem justify="space-between">
32
+ Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
33
+ </SimpleListItem>
34
+ <SimpleListItem justify="space-between">
35
+ Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
36
+ </SimpleListItem>
37
+ <SimpleListItem justify="space-between">
38
+ Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
39
+ </SimpleListItem>
40
+ </SimpleList>
41
+ <p className="docs-page__paragraph">// border / comfortable</p>
42
+ <SimpleList border={true} density='comfortable'>
43
+ <SimpleListItem>
44
+ <Icon name='photo' />
45
+ <Text weight='medium'>Adipiscing</Text>
46
+ <Text color='light'>Tellus Dolor Amet</Text>
47
+ <ButtonGroup align='end'>
48
+ <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
49
+ <IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
50
+ </ButtonGroup>
51
+ </SimpleListItem>
52
+ <SimpleListItem>
53
+ <Icon name='video' />
54
+ <Text weight='medium'>Condimentum</Text>
55
+ <Text color='light'>Nullam Ridiculus Mattis</Text>
56
+ <ButtonGroup align='end'>
57
+ <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
58
+ <IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
59
+ </ButtonGroup>
60
+ </SimpleListItem>
61
+ <SimpleListItem>
62
+ <Icon name='slideshow' />
63
+ <Text weight='medium'>Magna Bibendum</Text>
64
+ <Text color='light'>Vehicula Ornare Cras Aenean</Text>
65
+ <ButtonGroup align='end'>
66
+ <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
67
+ <IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
68
+ </ButtonGroup>
69
+ </SimpleListItem>
70
+ </SimpleList>
71
+
72
+
73
+ </Markup.ReactMarkupPreview>
74
+ <Markup.ReactMarkupCode>{`
75
+ // no border / compact (default)
76
+ <SimpleList>
77
+ <SimpleListItem>Maecenas sed diam eget risus varius blandit sit amet non magna.</SimpleListItem>
78
+ <SimpleListItem>Donec sed odio dui.</SimpleListItem>
79
+ <SimpleListItem>Etiam porta sem malesuada magna mollis euismod.</SimpleListItem>
80
+ <SimpleListItem>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</SimpleListItem>
81
+ </SimpleList>
82
+
83
+ // border / space-between
84
+ <SimpleList border={true}>
85
+ <SimpleListItem justify="space-between">
86
+ Vehicula Ridiculus <Label text='Active' type='success' style='translucent'/>
87
+ </SimpleListItem>
88
+ <SimpleListItem justify="space-between">
89
+ Tellus Mollis Aenean <Label text='Pending' type='warning' style='translucent'/>
90
+ </SimpleListItem>
91
+ <SimpleListItem justify="space-between">
92
+ Elit Vestibulum <Label text='Closed' type='alert' style='translucent'/>
93
+ </SimpleListItem>
94
+ </SimpleList>
95
+
96
+ // border / comfortable
97
+ <SimpleList border={true} density='comfortable'>
98
+ <SimpleListItem>
99
+ <Icon name='photo' />
100
+ <Text weight='medium'>Adipiscing</Text>
101
+ <Text color='light'>Tellus Dolor Amet</Text>
102
+ <ButtonGroup align='end'>
103
+ <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
104
+ <IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
105
+ </ButtonGroup>
106
+ </SimpleListItem>
107
+ <SimpleListItem>
108
+ <Icon name='video' />
109
+ <Text weight='medium'>Condimentum</Text>
110
+ <Text color='light'>Nullam Ridiculus Mattis</Text>
111
+ <ButtonGroup align='end'>
112
+ <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
113
+ <IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
114
+ </ButtonGroup>
115
+ </SimpleListItem>
116
+ <SimpleListItem>
117
+ <Icon name='slideshow' />
118
+ <Text weight='medium'>Magna Bibendum</Text>
119
+ <Text color='light'>Vehicula Ornare Cras Aenean</Text>
120
+ <ButtonGroup align='end'>
121
+ <IconButton icon='pencil' ariaValue="Edit" onClick={()=> false} />
122
+ <IconButton icon='trash' ariaValue="Delete" onClick={()=> false} />
123
+ </ButtonGroup>
124
+ </SimpleListItem>
125
+ </SimpleList>
126
+ `}
127
+ </Markup.ReactMarkupCode>
128
+ </Markup.ReactMarkup>
129
+
130
+
131
+ <h3 className="docs-page__h3">Props</h3>
132
+ <p className="docs-page__paragraph">SimpleList</p>
133
+ <PropsList>
134
+ <Prop name='density' isRequired={false} type='compact | comfortable | loose' default='compact' description='Specifies the vertical padding inside the list items. '/>
135
+ <Prop name='width' isRequired={false} type='none | x-small | small | medium | large' default='none' description='Defines the width of the list. If not specified the list will take the full width of the parent container.'/>
136
+ <Prop name='border' isRequired={false} type='boolean' default='false' description='Adds a dotted border on top of the list and between list items.'/>
137
+ <Prop name='className' isRequired={false} type='string' default='false' description='Add custom or helper classes to the list to modify the behaviour (e.g. top or bootom margins).'/>
138
+ </PropsList>
139
+ <p className="docs-page__paragraph">SimpleListItem</p>
140
+ <PropsList>
141
+ <Prop name='stacked' isRequired={false} type='boolean' default='false' description='Changes the flex-direction from row to column.'/>
142
+ <Prop name='justify' isRequired={false} type='flex-start | flex-end | center | space-between' default='flex-start' description='Changes the flex justification of the elements inside the list item. '/>
143
+ </PropsList>
144
+
145
+ </section>
146
+ )
147
+ }
148
+ }
@@ -1,8 +1,6 @@
1
1
  import * as React from 'react';
2
-
3
2
  import * as Markup from '../../js/react';
4
-
5
- import { SubNav, NavButton, Button, ButtonGroup, Divider} from '../../../app-typescript';
3
+ import { SubNav, NavButton, Button, ButtonGroup, Divider, PropsList, Prop} from '../../../app-typescript';
6
4
 
7
5
  export default class SubNavDoc extends React.Component {
8
6
  render() {
@@ -12,10 +10,10 @@ export default class SubNavDoc extends React.Component {
12
10
  <p></p>
13
11
  <Markup.ReactMarkupCodePreview>{`
14
12
  <SubNav zIndex={2}>
15
- <ButtonGroup align='left'>
13
+ <ButtonGroup align='start'>
16
14
  <NavButton icon='search' onClick={()=> false} />
17
15
  </ButtonGroup>
18
- <ButtonGroup align='right'>
16
+ <ButtonGroup align='end'>
19
17
  <NavButton icon='dots-vertical' onClick={()=> false} />
20
18
  </ButtonGroup>
21
19
  </SubNav>
@@ -25,18 +23,18 @@ export default class SubNavDoc extends React.Component {
25
23
  <Markup.ReactMarkup>
26
24
  <Markup.ReactMarkupPreview>
27
25
  <SubNav zIndex={4}>
28
- <ButtonGroup align='left'>
26
+ <ButtonGroup align='start'>
29
27
  <NavButton icon='search' onClick={()=> false} />
30
28
  </ButtonGroup>
31
- <ButtonGroup align='right'>
29
+ <ButtonGroup align='end'>
32
30
  <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
33
31
  </ButtonGroup>
34
32
  </SubNav>
35
33
  <SubNav color='darker' zIndex={3}>
36
- <ButtonGroup align='left'>
34
+ <ButtonGroup align='start'>
37
35
  <NavButton icon='filter-large' type='darker' onClick={()=> false} />
38
36
  </ButtonGroup>
39
- <ButtonGroup align='right'>
37
+ <ButtonGroup align='end'>
40
38
  <Button text='Something' onClick={()=> false} />
41
39
  <Button text='Else' onClick={()=> false} />
42
40
  <Divider border={true} />
@@ -51,7 +49,7 @@ export default class SubNavDoc extends React.Component {
51
49
  </SubNav>
52
50
  <br />
53
51
  <SubNav color='darker' zIndex={2}>
54
- <ButtonGroup align='left' padded={true}>
52
+ <ButtonGroup align='start' padded={true}>
55
53
  <Button text='Something' onClick={()=> false} />
56
54
  <Button text='Else' onClick={()=> false} />
57
55
  <Divider border={true} />
@@ -60,7 +58,7 @@ export default class SubNavDoc extends React.Component {
60
58
  </ButtonGroup>
61
59
  </SubNav>
62
60
  <br />
63
- <SubNav color='darker' zIndex={1}>
61
+ <SubNav color='blueGreyDarker' zIndex={1}>
64
62
  <ButtonGroup align='center'>
65
63
  <Button text='One' onClick={()=> false} />
66
64
  <Button text='Two' onClick={()=> false} />
@@ -74,20 +72,69 @@ export default class SubNavDoc extends React.Component {
74
72
  </SubNav>
75
73
  </Markup.ReactMarkupPreview>
76
74
  <Markup.ReactMarkupCode>{`
77
- <SubNav zIndex={2}>
78
- <ButtonGroup align='left'>
79
- <NavButton icon='filter-large' type='darker' onClick={()=> false} />
75
+ <SubNav zIndex={4}>
76
+ <ButtonGroup align='start'>
80
77
  <NavButton icon='search' onClick={()=> false} />
81
78
  </ButtonGroup>
82
- <ButtonGroup align='right'>
83
- <NavButton icon='list-plus' onClick={()=> false} />
84
- <NavButton icon='dots-vertical' onClick={()=> false} />
79
+ <ButtonGroup align='end'>
85
80
  <NavButton icon='expand-thin' type='highlight' onClick={()=> false} />
86
81
  </ButtonGroup>
87
- </SubNav>
82
+ </SubNav>
83
+ <SubNav color='darker' zIndex={3}>
84
+ <ButtonGroup align='start'>
85
+ <NavButton icon='filter-large' type='darker' onClick={()=> false} />
86
+ </ButtonGroup>
87
+ <ButtonGroup align='end'>
88
+ <Button text='Something' onClick={()=> false} />
89
+ <Button text='Else' onClick={()=> false} />
90
+ <Divider border={true} />
91
+ <Button text='Cancel' onClick={()=> false} />
92
+ <Button text='Save' type='primary' onClick={()=> false} />
93
+ <Divider size="mini" />
94
+ <ButtonGroup subgroup={true} spaces='no-space'>
95
+ <NavButton icon='list-plus' onClick={()=> false} />
96
+ <NavButton icon='dots-vertical' onClick={()=> false} />
97
+ </ButtonGroup>
98
+ </ButtonGroup>
99
+ </SubNav>
100
+
101
+ <br />
102
+
103
+ <SubNav color='darker' zIndex={2}>
104
+ <ButtonGroup align='start' padded={true}>
105
+ <Button text='Something' onClick={()=> false} />
106
+ <Button text='Else' onClick={()=> false} />
107
+ <Divider border={true} />
108
+ <Button text='Cancel' onClick={()=> false} />
109
+ <Button text='Save' type='primary' onClick={()=> false} />
110
+ </ButtonGroup>
111
+ </SubNav>
112
+
113
+ <br />
114
+
115
+ <SubNav color='blueGreyDarker' zIndex={1}>
116
+ <ButtonGroup align='center'>
117
+ <Button text='One' onClick={()=> false} />
118
+ <Button text='Two' onClick={()=> false} />
119
+ <Divider border={true} />
120
+ <Button text='Three' onClick={()=> false} />
121
+ <Button text='Four' onClick={()=> false} />
122
+ <Divider border={true} />
123
+ <Button text='Five' onClick={()=> false} />
124
+ <Button text='Six' onClick={()=> false} />
125
+ </ButtonGroup>
126
+ </SubNav>
88
127
  `}
89
128
  </Markup.ReactMarkupCode>
90
129
  </Markup.ReactMarkup>
130
+
131
+ <h3 className="docs-page__h3">Props</h3>
132
+ <PropsList>
133
+ <Prop name='color' isRequired={false} type='light | darker | blueGrey | blueGreyDarker' default='light' description='Background colour of the SubNav component.'/>
134
+ <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All child elements will inherit the theme of the SubNav if it is set.'/>
135
+ <Prop name='zIndex' isRequired={true} type='number' default='1000' description='Increase the default z-index value (1000) by the specified amount.'/>
136
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles.'/>
137
+ </PropsList>
91
138
  </section>
92
139
  );
93
140
  }
@@ -0,0 +1,161 @@
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, SelectGrid, Dropdown, Tooltip } from '../../../app-typescript';
4
+ import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
5
+
6
+ interface IState {
7
+ array: any;
8
+ }
9
+
10
+ interface IProps {
11
+ array: any;
12
+ }
13
+
14
+ export default class TableListDoc extends React.Component<IProps, IState> {
15
+ constructor(props: IState) {
16
+ super(props);
17
+ this.state = {
18
+ array: [
19
+ {
20
+ start: <>
21
+ <Label style='translucent' text='aacc' />
22
+ <Label style='translucent' type='primary' text='prlg' />
23
+ </>,
24
+ center: <span>Item 1</span>,
25
+ end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
26
+ action: <Dropdown append={true} items={[
27
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
28
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
29
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
30
+ ]}><IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={(e) => e.stopPropagation()} /></Dropdown>,
31
+ onClick: () => console.log('single'),
32
+ onDoubleClick: () => console.log('double'),
33
+ hexColor: '#ccff00'
34
+ },
35
+ {
36
+ start: <>
37
+ <Label style='translucent' text='aacc' />
38
+ <Label style='translucent' type='primary' text='prlg' />
39
+ </>,
40
+ center: <span>Item 2</span>,
41
+ end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
42
+ action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
43
+ onClick: () => console.log('single'),
44
+ onDoubleClick: () => console.log('double'),
45
+ },
46
+ {
47
+ start: <>
48
+ <Label style='translucent' text='aacc' />
49
+ <Label style='translucent' type='primary' text='prlg' />
50
+ </>,
51
+ center: <span>Item 3</span>,
52
+ end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
53
+ action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
54
+ onClick: () => console.log('single'),
55
+ onDoubleClick: () => console.log('double'),
56
+ hexColor: '#ff9808'
57
+ },
58
+ ]
59
+ }
60
+
61
+ }
62
+
63
+ render() {
64
+ return (
65
+ <section className='docs-page__container'>
66
+ <h2 className='docs-page__h2'>TableList</h2>
67
+
68
+ <Markup.ReactMarkupCodePreview>{`
69
+ <TableList
70
+ dragAndDrop
71
+ addItem
72
+ array={this.state.array}
73
+ itemsDropdown={(index) => [
74
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => false },
75
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => false },
76
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => false },
77
+ ]} />
78
+ `}
79
+ </Markup.ReactMarkupCodePreview>
80
+
81
+ <p className="docs-page__paragraph">Simple list without drag and drop functionality and without functionality for adding item in list:</p>
82
+ <Markup.ReactMarkup>
83
+ <Markup.ReactMarkupPreview>
84
+ <TableList
85
+ array={this.state.array}
86
+ />
87
+ </Markup.ReactMarkupPreview>
88
+ <Markup.ReactMarkupCode>{`
89
+ <TableList
90
+ array={this.state.array}
91
+ />
92
+ `}
93
+ </Markup.ReactMarkupCode>
94
+ </Markup.ReactMarkup>
95
+
96
+ <p className="docs-page__paragraph">With drag and drop functionality:</p>
97
+ <Markup.ReactMarkup>
98
+ <Markup.ReactMarkupPreview>
99
+ <TableList
100
+ dragAndDrop
101
+ append
102
+ addItem
103
+ array={this.state.array}
104
+ itemsDropdown={(index) => [
105
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
106
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
107
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
108
+ ]
109
+ }
110
+ onDrag={(start, end) => console.log(start, end)}
111
+ />
112
+ </Markup.ReactMarkupPreview>
113
+ <Markup.ReactMarkupCode>{`
114
+ <TableList
115
+ dragAndDrop
116
+ addItem
117
+ array={this.state.array}
118
+ itemsDropdown={(index) => [
119
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
120
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
121
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
122
+ ]
123
+ }
124
+ onDrag={(start, end) => console.log(start, end)}
125
+ />
126
+ `}
127
+ </Markup.ReactMarkupCode>
128
+ </Markup.ReactMarkup>
129
+
130
+ <h3 className="docs-page__h3">Props</h3>
131
+ <p className="docs-page__paragraph">TableList</p>
132
+ <PropsList>
133
+ <Prop name='array' isRequired={true} type='Array' default='false' description='Array of object.' />
134
+ <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
135
+ <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
136
+ <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
137
+ <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
138
+ <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
139
+ <Prop name='append' isRequired={false} type='boolean' default='false' description='Set append to body on individual item while draging.' />
140
+ <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
141
+ <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
142
+ <Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />
143
+ </PropsList>
144
+ <p className="docs-page__paragraph">array:</p>
145
+ <PropsList>
146
+ <Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
147
+ <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
148
+ <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
149
+ <Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
150
+ <Prop name='hexColor' isRequired={false} type='string' default='false' description='Color of left border for item status.' />
151
+ <Prop name='locked' isRequired={false} type='function' default='false' description='If is true, the individual item of list change state and change style (border).' />
152
+ <Prop name='positionLocked' isRequired={false} type='function' default='false' description='Work in progress...' />
153
+ <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
154
+ <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
155
+ </PropsList>
156
+
157
+
158
+ </section>
159
+ )
160
+ }
161
+ }
@@ -5,14 +5,26 @@ import { Tag, Prop, PropsList } from '../../../app-typescript';
5
5
 
6
6
  interface ITag{
7
7
  tags: Array<any>;
8
+ tags2: Array<any>;
8
9
  }
9
10
  export default class TagDoc extends React.Component<{}, ITag> {
10
11
  constructor(props){
11
12
  super(props);
12
13
  this.state = {
13
- tags: [{text: 'This is a tag'},{text: 'This is another tag', shade:'darker'}, {text: 'Inverse tag', shade:'inverse'}, {text: 'Lorem ipsum', shade:'highlight1'}, {text: 'Dolor amet', shade:'highlight2', shape:'square'}],
14
+ tags: [
15
+ {text: 'This is a tag'},
16
+ {text: 'This is another tag', shade:'darker'},
17
+ {text: 'Inverse tag', shade:'inverse'},
18
+ {text: 'Lorem ipsum', shade:'highlight1'},
19
+ {text: 'Dolor amet', shade:'highlight2', shape:'square'},
20
+ {text: 'Read only tag', readOnly: true}
21
+ ],
22
+ tags2: [
23
+ {text: 'Tag with label', label: 'Label'},
24
+ ],
14
25
  }
15
26
  this.handleClick=this.handleClick.bind(this);
27
+ this.handleClick2=this.handleClick2.bind(this);
16
28
  }
17
29
 
18
30
  handleClick(i:number){
@@ -22,6 +34,14 @@ export default class TagDoc extends React.Component<{}, ITag> {
22
34
  tags: newTags
23
35
  });
24
36
  }
37
+
38
+ handleClick2(i:number){
39
+ let newTags2 = clone(this.state.tags2);
40
+ newTags2.splice(i, 1);
41
+ this.setState({
42
+ tags2: newTags2
43
+ });
44
+ }
25
45
  render() {
26
46
  return (
27
47
  <section className="docs-page__container">
@@ -37,7 +57,12 @@ export default class TagDoc extends React.Component<{}, ITag> {
37
57
  {this.state.tags.map((tag,index)=>{
38
58
  return (
39
59
  <React.Fragment key={index}>
40
- <Tag keyValue={index} text={tag.text} shade={tag.shade} shape={tag.shape} onClick={()=>this.handleClick(index)}/>
60
+ <Tag keyValue={index}
61
+ text={tag.text}
62
+ shade={tag.shade}
63
+ shape={tag.shape}
64
+ readOnly={tag.readOnly}
65
+ onClick={()=>this.handleClick(index)}/>
41
66
  </React.Fragment>
42
67
  )
43
68
  })}
@@ -46,19 +71,46 @@ export default class TagDoc extends React.Component<{}, ITag> {
46
71
  <Markup.ReactMarkupCode>{`
47
72
  <Tag text='This is a tag' onClick={()=>false}/>
48
73
  <Tag text='This is a another tag' shade='darker' onClick={()=>false}/>
74
+ <Tag text='Inverse tag' shade='inverse' onClick={()=>false}/>
49
75
  <Tag text='Lorem ipsum' shade='highlight1' onClick={()=>false}/>
50
76
  <Tag text='Dolor amet' shade='highlight2' shape='square' onClick={()=>false}/>
77
+ <Tag text='Read only tag' readOnly={trye} onClick={()=>false}/>
51
78
 
52
79
  `}
53
80
  </Markup.ReactMarkupCode>
54
81
  </Markup.ReactMarkup>
55
82
 
83
+ <Markup.ReactMarkup>
84
+ <Markup.ReactMarkupPreview>
85
+ <div className='docs-page__content-row'>
86
+ {this.state.tags2.map((tag,index)=>{
87
+ return (
88
+ <React.Fragment key={index}>
89
+ <Tag keyValue={index}
90
+ text={tag.text}
91
+ label={tag.label}
92
+ onClick={() => this.handleClick2(index)}/>
93
+ </React.Fragment>
94
+ )
95
+ })}
96
+ </div>
97
+ </Markup.ReactMarkupPreview>
98
+ <Markup.ReactMarkupCode>{`
99
+ <Tag text='Tag with label'
100
+ label='Label'
101
+ onClick={() => false} />
102
+ `}
103
+ </Markup.ReactMarkupCode>
104
+ </Markup.ReactMarkup>
105
+
56
106
  <h3 className="docs-page__h3">Props</h3>
57
107
  <PropsList>
58
108
  <Prop name='text' isRequired={true} type='string' default='/' description='Tag text value.'/>
59
- <Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2 | inverse' default='light' description='Shade colour of tag'/>
60
- <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of tag square or default round.'/>
61
- <Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of tag key'/>
109
+ <Prop name='shade' isRequired={false} type='light | darker | highlight1 | highlight2 | inverse' default='light' description='Shade colour of the tag.'/>
110
+ <Prop name='shape' isRequired={false} type='round | square' default='round' description='Shape of tag. Round (default) or square.'/>
111
+ <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='Removes the option to delete the tag if set to true.'/>
112
+ <Prop name='keyValue' isRequired={false} type='number' default='/' description='Value of the tag key.'/>
113
+ <Prop name='label' isRequired={false} type='string' default='/' description='Text of label.'/>
62
114
  </PropsList>
63
115
  </section>
64
116
  )