superdesk-ui-framework 2.4.21 → 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 (698) 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 +2 -1
  17. package/app/scripts/check.js +1 -1
  18. package/app/scripts/modals.js +1 -0
  19. package/app/scripts/toggleBoxNext.js +1 -1
  20. package/app/styles/_accessibility.scss +309 -6
  21. package/app/styles/_alerts.scss +227 -97
  22. package/app/styles/_avatar.scss +60 -33
  23. package/app/styles/_badge.scss +55 -26
  24. package/app/styles/_big-icon-font.scss +64 -23
  25. package/app/styles/_boxed-list.scss +70 -23
  26. package/app/styles/_buttons.scss +553 -1026
  27. package/app/styles/_carousel.scss +19 -13
  28. package/app/styles/_content-divider.scss +180 -0
  29. package/app/styles/_design-tokens.scss +2 -0
  30. package/app/styles/_drag-drop.scss +1 -1
  31. package/app/styles/_empty-states.scss +9 -1
  32. package/app/styles/_hamburger.scss +160 -0
  33. package/app/styles/_helpers.scss +684 -311
  34. package/app/styles/_icon-font.scss +353 -309
  35. package/app/styles/_icon-labels.scss +69 -14
  36. package/app/styles/_labels.scss +65 -53
  37. package/app/styles/_loaders.scss +28 -0
  38. package/app/styles/_master-desk.scss +14 -13
  39. package/app/styles/_mixins.scss +21 -13
  40. package/app/styles/_modals.scss +109 -119
  41. package/app/styles/_normalize.scss +5 -0
  42. package/app/styles/_panel-info.scss +21 -16
  43. package/app/styles/_popover.scss +2 -2
  44. package/app/styles/_pr-superdesk-theme.scss +4 -0
  45. package/app/styles/_publisher-styles.scss +182 -0
  46. package/app/styles/_reboot.scss +1 -0
  47. package/app/styles/_sd-tag-input.scss +311 -264
  48. package/app/styles/_simple-list.scss +39 -19
  49. package/app/styles/_table-list.scss +348 -0
  50. package/app/styles/_tables.scss +5 -4
  51. package/app/styles/_tabs.scss +24 -75
  52. package/app/styles/_tag-labels.scss +47 -47
  53. package/app/styles/_thumb-carousel.scss +11 -10
  54. package/app/styles/_toggle-box.scss +52 -46
  55. package/app/styles/_toggle-button.scss +42 -0
  56. package/app/styles/_tooltips.scss +55 -98
  57. package/app/styles/_variables.scss +0 -1
  58. package/app/styles/app.scss +22 -1
  59. package/app/styles/components/_card-item.scss +41 -28
  60. package/app/styles/components/_list-item.scss +78 -125
  61. package/app/styles/components/_sd-circular-progress.scss +1 -1
  62. package/app/styles/components/_sd-collapse-box.scss +11 -38
  63. package/app/styles/components/_sd-comment-box.scss +8 -4
  64. package/app/styles/components/_sd-dropzone.scss +114 -0
  65. package/app/styles/components/_sd-editor-popup.scss +4 -4
  66. package/app/styles/components/_sd-grid-item.scss +105 -193
  67. package/app/styles/components/_sd-loader.scss +1 -16
  68. package/app/styles/components/_sd-media-carousel.scss +47 -14
  69. package/app/styles/components/_sd-notification-panel.scss +48 -0
  70. package/app/styles/components/_sd-photo-preview.scss +16 -16
  71. package/app/styles/components/_sd-searchbar.scss +50 -127
  72. package/app/styles/components/_sd-toaster.scss +13 -6
  73. package/app/styles/components/_subnav.scss +475 -474
  74. package/app/styles/components/_theme-selector.scss +189 -0
  75. package/app/styles/components/sd-slider.scss +11 -11
  76. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  77. package/app/styles/design-tokens/_new-colors.scss +724 -0
  78. package/app/styles/dropdowns/_basic-dropdown.scss +125 -76
  79. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  80. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  81. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  82. package/app/styles/editor/_editor-buttons.scss +54 -0
  83. package/app/styles/editor/_editor-themes.scss +437 -0
  84. package/app/styles/form-elements/_autocomplete.scss +12 -41
  85. package/app/styles/form-elements/_checkbox.scss +180 -245
  86. package/app/styles/form-elements/_forms-general.scss +173 -27
  87. package/app/styles/form-elements/_input-wrap.scss +138 -0
  88. package/app/styles/form-elements/_inputs.scss +646 -421
  89. package/app/styles/form-elements/_radio.scss +6 -6
  90. package/app/styles/form-elements/_select-grid.scss +16 -14
  91. package/app/styles/form-elements/_switch.scss +26 -47
  92. package/app/styles/grids/_basic-grid.scss +52 -26
  93. package/app/styles/grids/_grid-layout.scss +256 -94
  94. package/app/styles/grids/_layout-grid.scss +6 -6
  95. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  96. package/app/styles/interface-elements/_side-panel.scss +116 -84
  97. package/app/styles/layout/_basic-layout.scss +13 -21
  98. package/app/styles/layout/_container.scss +35 -0
  99. package/app/styles/layout/_editor.scss +404 -0
  100. package/app/styles/layout/_general.scss +4 -5
  101. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  102. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  103. package/app/styles/menus/_sd-left-navigation.scss +57 -18
  104. package/app/styles/menus/_sd-sidebar-menu.scss +124 -30
  105. package/app/styles/menus/_sd-top-menu.scss +22 -8
  106. package/app/styles/primereact/_pr-datepicker.scss +64 -11
  107. package/app/styles/primereact/_pr-dialog.scss +136 -30
  108. package/app/styles/primereact/_pr-dropdown.scss +190 -18
  109. package/app/styles/primereact/_pr-general.scss +14 -7
  110. package/app/styles/primereact/_pr-menu.scss +14 -16
  111. package/app/styles/variables/_colors.scss +152 -544
  112. package/app/styles/variables/_dimensions.scss +82 -4
  113. package/app/styles/variables/_form-elements.scss +0 -2
  114. package/app/styles/variables/_typography.scss +2 -0
  115. package/app-typescript/components/Alert.tsx +16 -1
  116. package/app-typescript/components/Avatar.tsx +21 -0
  117. package/app-typescript/components/Badge.tsx +3 -2
  118. package/app-typescript/components/ButtonGroup.tsx +9 -5
  119. package/app-typescript/components/Carousel.tsx +1 -1
  120. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  121. package/app-typescript/components/CheckGroup.tsx +2 -1
  122. package/app-typescript/components/Checkbox.tsx +7 -3
  123. package/app-typescript/components/CheckboxButton.tsx +9 -2
  124. package/app-typescript/components/ContentDivider.tsx +37 -0
  125. package/app-typescript/components/CreateButton.tsx +38 -0
  126. package/app-typescript/components/DatePicker.tsx +77 -38
  127. package/app-typescript/components/DonutChart.tsx +1 -1
  128. package/app-typescript/components/DropZone.tsx +89 -0
  129. package/app-typescript/components/Dropdown.tsx +141 -77
  130. package/app-typescript/components/DropdownFirst.tsx +1 -1
  131. package/app-typescript/components/DurationInput.tsx +400 -0
  132. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  133. package/app-typescript/components/EmptyState.tsx +2 -1
  134. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  135. package/app-typescript/components/Form/FormItem.tsx +20 -0
  136. package/app-typescript/components/Form/FormLabel.tsx +29 -0
  137. package/app-typescript/components/Form/FormRow.tsx +40 -0
  138. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  139. package/app-typescript/components/Form/FormText.tsx +15 -0
  140. package/app-typescript/components/Form/InputBase.tsx +95 -0
  141. package/app-typescript/components/Form/InputNew.tsx +107 -0
  142. package/app-typescript/components/Form/InputWrapper.tsx +79 -0
  143. package/app-typescript/components/Form/index.tsx +9 -0
  144. package/app-typescript/components/Icon.tsx +4 -2
  145. package/app-typescript/components/IconButton.tsx +30 -12
  146. package/app-typescript/components/IconLabel.tsx +8 -1
  147. package/app-typescript/components/Input.tsx +68 -52
  148. package/app-typescript/components/Label.tsx +65 -10
  149. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  150. package/app-typescript/components/Layouts/AuthoringContainer.tsx +28 -0
  151. package/app-typescript/components/Layouts/AuthoringFrame.tsx +73 -0
  152. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  153. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  154. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  155. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  156. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  157. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +34 -0
  158. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  159. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  160. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  161. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  162. package/app-typescript/components/Layouts/AuthoringMain.tsx +52 -0
  163. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  164. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  165. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  166. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  167. package/app-typescript/components/Layouts/Container.tsx +30 -0
  168. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  169. package/app-typescript/components/Layouts/CoreLayout.tsx +63 -0
  170. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  171. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  172. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +22 -0
  173. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  174. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  175. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  176. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  177. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  178. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  179. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  180. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  181. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  182. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  183. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  184. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  185. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  186. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  187. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  188. package/app-typescript/components/Layouts/index.tsx +43 -0
  189. package/app-typescript/components/LeftMenu.tsx +116 -31
  190. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  191. package/app-typescript/components/Lists/ContentList.tsx +133 -0
  192. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  193. package/app-typescript/components/Lists/TableList.tsx +405 -0
  194. package/app-typescript/components/Lists/index.tsx +2 -0
  195. package/app-typescript/components/Menu.tsx +33 -9
  196. package/app-typescript/components/Modal.tsx +34 -16
  197. package/app-typescript/components/MultiSelect.tsx +99 -0
  198. package/app-typescript/components/NavButton.tsx +6 -1
  199. package/app-typescript/components/Navigation/BottomNav.tsx +83 -0
  200. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  201. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  202. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  203. package/app-typescript/components/Navigation/index.tsx +3 -0
  204. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  205. package/app-typescript/components/RadioGroup.tsx +69 -0
  206. package/app-typescript/components/SearchBar.tsx +106 -0
  207. package/app-typescript/components/Select.tsx +29 -39
  208. package/app-typescript/components/SelectGrid.tsx +4 -4
  209. package/app-typescript/components/SelectWithTemplate.tsx +32 -7
  210. package/app-typescript/components/SidebarMenu.tsx +68 -0
  211. package/app-typescript/components/Skeleton.tsx +1 -1
  212. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  213. package/app-typescript/components/Spacer.tsx +87 -0
  214. package/app-typescript/components/Spinner.tsx +1 -2
  215. package/app-typescript/components/SubNav.tsx +25 -4
  216. package/app-typescript/components/Switch.tsx +34 -12
  217. package/app-typescript/components/SwitchGroup.tsx +2 -1
  218. package/app-typescript/components/TabCustom.tsx +40 -89
  219. package/app-typescript/components/TabList.tsx +18 -43
  220. package/app-typescript/components/Tag.tsx +32 -9
  221. package/app-typescript/components/Text/Heading.tsx +67 -0
  222. package/app-typescript/components/Text/Text.tsx +36 -0
  223. package/app-typescript/components/Text/Time.tsx +34 -0
  224. package/app-typescript/components/ThemeSelector.tsx +113 -0
  225. package/app-typescript/components/TimePicker.tsx +38 -15
  226. package/app-typescript/components/Togglebox.tsx +9 -7
  227. package/app-typescript/components/Tooltip.tsx +7 -5
  228. package/app-typescript/components/TreeSelect.tsx +664 -0
  229. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  230. package/app-typescript/helpers.tsx +3 -0
  231. package/app-typescript/index.ts +27 -4
  232. package/dist/SD-logo.svg +52 -0
  233. package/dist/avatar-2.jpg +0 -0
  234. package/dist/avatar-3.jpg +0 -0
  235. package/dist/avatar-4.jpg +0 -0
  236. package/dist/avatar-5.jpg +0 -0
  237. package/dist/avatar-6.jpg +0 -0
  238. package/dist/avatar_64.png +0 -0
  239. package/dist/components/basic-grid.html +1 -1
  240. package/dist/components/checkbox.html +1 -1
  241. package/dist/dots.svg +3 -0
  242. package/dist/examples.bundle.css +10746 -2781
  243. package/dist/examples.bundle.js +94094 -67758
  244. package/dist/index.html +9 -12
  245. package/dist/playgrounds/accessible-theme-test.html +1 -1
  246. package/dist/playgrounds/boxed-list.html +1 -1
  247. package/dist/playgrounds/cards.html +9 -4
  248. package/dist/playgrounds/editor-3-test.html +15 -0
  249. package/dist/playgrounds/form-layout.html +9 -7
  250. package/dist/playgrounds/layout-test-2.html +41 -37
  251. package/dist/playgrounds/list-item-test.html +2 -2
  252. package/dist/playgrounds/master-desk.html +2 -4
  253. package/dist/playgrounds/media-carousel.html +1 -1
  254. package/dist/playgrounds/photo-desk.html +34 -34
  255. package/dist/playgrounds/planning.html +1 -1
  256. package/dist/playgrounds/publish.html +1 -1
  257. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  258. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  259. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  260. package/dist/playgrounds/publisher-content-lists.html +1 -1
  261. package/dist/playgrounds/publisher-dashboard.html +1 -1
  262. package/dist/playgrounds/publisher-output-control.html +1 -1
  263. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  264. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  265. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  266. package/dist/playgrounds/react-playgrounds/Index.tsx +9 -1
  267. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  268. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  269. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  270. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  271. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  272. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +41 -41
  273. package/dist/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  274. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  275. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  276. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  277. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  278. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +3 -3
  279. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  281. package/dist/playgrounds/swimlane-view.html +1 -1
  282. package/dist/playgrounds/tags-input.html +1 -1
  283. package/dist/playgrounds/toasts.html +1 -1
  284. package/dist/playgrounds/video-editor.html +1 -1
  285. package/dist/react/Alerts.tsx +123 -23
  286. package/dist/react/Avatar.tsx +314 -127
  287. package/dist/react/Badges.tsx +18 -0
  288. package/dist/react/BoxedList.tsx +362 -0
  289. package/dist/react/ButtonGroups.tsx +66 -65
  290. package/dist/react/Buttons.tsx +62 -247
  291. package/dist/react/Carousel.tsx +2 -3
  292. package/dist/react/Checkboxs.tsx +66 -25
  293. package/dist/react/Container.tsx +143 -0
  294. package/dist/react/ContentDivider.tsx +182 -0
  295. package/dist/react/ContentList.tsx +462 -0
  296. package/dist/react/CreateButton.tsx +71 -0
  297. package/dist/react/DatePicker.tsx +31 -6
  298. package/dist/react/DropZone.tsx +111 -0
  299. package/dist/react/Dropdowns.tsx +580 -48
  300. package/dist/react/DurationInput.tsx +108 -0
  301. package/dist/react/Heading.tsx +106 -0
  302. package/dist/react/IconButtons.tsx +49 -42
  303. package/dist/react/IconLabels.tsx +24 -2
  304. package/dist/react/Index.tsx +143 -11
  305. package/dist/react/Inputs.tsx +284 -23
  306. package/dist/react/Labels.tsx +51 -1
  307. package/dist/react/LeftNavigations.tsx +194 -15
  308. package/dist/react/ListItems.tsx +3 -3
  309. package/dist/react/Modal.tsx +174 -19
  310. package/dist/react/MultiSelect.tsx +201 -0
  311. package/dist/react/NavButtons.tsx +35 -5
  312. package/dist/react/Panel.tsx +366 -0
  313. package/dist/react/QuickNavigationBar.tsx +142 -0
  314. package/dist/react/RadioGroup.tsx +351 -0
  315. package/dist/react/SelectWithTemplate.tsx +7 -2
  316. package/dist/react/Selects.tsx +50 -15
  317. package/dist/react/SimpleList.tsx +148 -0
  318. package/dist/react/SubNav.tsx +69 -20
  319. package/dist/react/TableList.tsx +161 -0
  320. package/dist/react/Tabs.tsx +72 -248
  321. package/dist/react/Tags.tsx +52 -13
  322. package/dist/react/Text.tsx +134 -0
  323. package/dist/react/TimePicker.tsx +22 -12
  324. package/dist/react/Togglebox.tsx +1 -1
  325. package/dist/react/Tooltips.tsx +1 -1
  326. package/dist/react/TreeSelect.tsx +422 -0
  327. package/dist/react/WithSizeObserver.tsx +44 -0
  328. package/dist/react/tree-select/TreeSelect.tsx +273 -0
  329. package/dist/react/tree-select/example-1.tsx +71 -0
  330. package/dist/react/tree-select/example-2.tsx +59 -0
  331. package/dist/react.html +4 -0
  332. package/dist/sd_big-icons.eot +0 -0
  333. package/dist/sd_big-icons.svg +55 -53
  334. package/dist/sd_big-icons.ttf +0 -0
  335. package/dist/sd_big-icons.woff +0 -0
  336. package/dist/sd_icons.eot +0 -0
  337. package/dist/sd_icons.svg +15 -7
  338. package/dist/sd_icons.ttf +0 -0
  339. package/dist/sd_icons.woff +0 -0
  340. package/dist/superdesk-ui.bundle.css +55041 -26655
  341. package/dist/superdesk-ui.bundle.js +88737 -67504
  342. package/dist/vendor.bundle.js +25070 -25074
  343. package/examples/css/docs-page.css +208 -50
  344. package/examples/img/avatar-2.jpg +0 -0
  345. package/examples/img/avatar-3.jpg +0 -0
  346. package/examples/img/avatar-4.jpg +0 -0
  347. package/examples/img/avatar-5.jpg +0 -0
  348. package/examples/img/avatar-6.jpg +0 -0
  349. package/examples/index.html +9 -12
  350. package/examples/index.js +36 -0
  351. package/examples/pages/components/basic-grid.html +1 -1
  352. package/examples/pages/components/checkbox.html +1 -1
  353. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  354. package/examples/pages/playgrounds/boxed-list.html +1 -1
  355. package/examples/pages/playgrounds/cards.html +9 -4
  356. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  357. package/examples/pages/playgrounds/form-layout.html +9 -7
  358. package/examples/pages/playgrounds/layout-test-2.html +41 -37
  359. package/examples/pages/playgrounds/list-item-test.html +2 -2
  360. package/examples/pages/playgrounds/master-desk.html +2 -4
  361. package/examples/pages/playgrounds/media-carousel.html +1 -1
  362. package/examples/pages/playgrounds/photo-desk.html +34 -34
  363. package/examples/pages/playgrounds/planning.html +1 -1
  364. package/examples/pages/playgrounds/publish.html +1 -1
  365. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  366. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  367. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  368. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  369. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  370. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  371. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +156 -0
  372. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  373. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  374. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +9 -1
  375. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
  376. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  377. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  378. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +469 -0
  379. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1001 -0
  380. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +41 -41
  381. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +631 -24
  382. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  383. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  384. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  385. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  386. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +3 -3
  387. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  388. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  389. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  390. package/examples/pages/playgrounds/tags-input.html +1 -1
  391. package/examples/pages/playgrounds/toasts.html +1 -1
  392. package/examples/pages/playgrounds/video-editor.html +1 -1
  393. package/examples/pages/react/Alerts.tsx +123 -23
  394. package/examples/pages/react/Avatar.tsx +314 -127
  395. package/examples/pages/react/Badges.tsx +18 -0
  396. package/examples/pages/react/BoxedList.tsx +362 -0
  397. package/examples/pages/react/ButtonGroups.tsx +66 -65
  398. package/examples/pages/react/Buttons.tsx +62 -247
  399. package/examples/pages/react/Carousel.tsx +2 -3
  400. package/examples/pages/react/Checkboxs.tsx +66 -25
  401. package/examples/pages/react/Container.tsx +143 -0
  402. package/examples/pages/react/ContentDivider.tsx +182 -0
  403. package/examples/pages/react/ContentList.tsx +462 -0
  404. package/examples/pages/react/CreateButton.tsx +71 -0
  405. package/examples/pages/react/DatePicker.tsx +31 -6
  406. package/examples/pages/react/DropZone.tsx +111 -0
  407. package/examples/pages/react/Dropdowns.tsx +580 -48
  408. package/examples/pages/react/DurationInput.tsx +108 -0
  409. package/examples/pages/react/Heading.tsx +106 -0
  410. package/examples/pages/react/IconButtons.tsx +49 -42
  411. package/examples/pages/react/IconLabels.tsx +24 -2
  412. package/examples/pages/react/Index.tsx +143 -11
  413. package/examples/pages/react/Inputs.tsx +284 -23
  414. package/examples/pages/react/Labels.tsx +51 -1
  415. package/examples/pages/react/LeftNavigations.tsx +194 -15
  416. package/examples/pages/react/ListItems.tsx +3 -3
  417. package/examples/pages/react/Modal.tsx +174 -19
  418. package/examples/pages/react/MultiSelect.tsx +201 -0
  419. package/examples/pages/react/NavButtons.tsx +35 -5
  420. package/examples/pages/react/Panel.tsx +366 -0
  421. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  422. package/examples/pages/react/RadioGroup.tsx +351 -0
  423. package/examples/pages/react/SelectWithTemplate.tsx +7 -2
  424. package/examples/pages/react/Selects.tsx +50 -15
  425. package/examples/pages/react/SimpleList.tsx +148 -0
  426. package/examples/pages/react/SubNav.tsx +69 -20
  427. package/examples/pages/react/TableList.tsx +161 -0
  428. package/examples/pages/react/Tabs.tsx +72 -248
  429. package/examples/pages/react/Tags.tsx +52 -13
  430. package/examples/pages/react/Text.tsx +134 -0
  431. package/examples/pages/react/TimePicker.tsx +22 -12
  432. package/examples/pages/react/Togglebox.tsx +1 -1
  433. package/examples/pages/react/Tooltips.tsx +1 -1
  434. package/examples/pages/react/TreeSelect.tsx +422 -0
  435. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  436. package/examples/pages/react/tree-select/TreeSelect.tsx +273 -0
  437. package/examples/pages/react/tree-select/example-1.tsx +71 -0
  438. package/examples/pages/react/tree-select/example-2.tsx +59 -0
  439. package/examples/pages/react.html +4 -0
  440. package/images/avatar_64.png +0 -0
  441. package/package.json +17 -12
  442. package/react/components/Alert.d.ts +3 -0
  443. package/react/components/Alert.js +17 -7
  444. package/react/components/Autocomplete.js +16 -12
  445. package/react/components/Avatar.d.ts +9 -0
  446. package/react/components/Avatar.js +24 -4
  447. package/react/components/Badge.d.ts +1 -0
  448. package/react/components/Badge.js +9 -7
  449. package/react/components/Button.js +8 -6
  450. package/react/components/ButtonGroup.d.ts +4 -2
  451. package/react/components/ButtonGroup.js +11 -7
  452. package/react/components/Carousel.js +5 -3
  453. package/react/components/CheckButtonGroup.d.ts +3 -1
  454. package/react/components/CheckButtonGroup.js +14 -6
  455. package/react/components/CheckGroup.d.ts +1 -0
  456. package/react/components/CheckGroup.js +6 -4
  457. package/react/components/Checkbox.d.ts +2 -1
  458. package/react/components/Checkbox.js +7 -5
  459. package/react/components/CheckboxButton.d.ts +1 -0
  460. package/react/components/CheckboxButton.js +8 -6
  461. package/react/components/ContentDivider.d.ts +13 -0
  462. package/react/components/ContentDivider.js +70 -0
  463. package/react/components/CreateButton.d.ts +17 -0
  464. package/react/components/CreateButton.js +68 -0
  465. package/react/components/DatePicker.d.ts +11 -0
  466. package/react/components/DatePicker.js +45 -31
  467. package/react/components/Divider.js +6 -4
  468. package/react/components/DonutChart.d.ts +1 -1
  469. package/react/components/DonutChart.js +24 -6
  470. package/react/components/DropZone.d.ts +25 -0
  471. package/react/components/DropZone.js +95 -0
  472. package/react/components/Dropdown.d.ts +7 -5
  473. package/react/components/Dropdown.js +84 -51
  474. package/react/components/DropdownFirst.js +19 -12
  475. package/react/components/DurationInput.d.ts +42 -0
  476. package/react/components/DurationInput.js +364 -0
  477. package/react/components/EmptyState.d.ts +1 -0
  478. package/react/components/EmptyState.js +8 -6
  479. package/react/components/Form/FormGroup.d.ts +13 -0
  480. package/react/components/Form/FormGroup.js +63 -0
  481. package/react/components/Form/FormItem.d.ts +9 -0
  482. package/react/components/Form/FormItem.js +56 -0
  483. package/react/components/Form/FormLabel.d.ts +13 -0
  484. package/react/components/Form/FormLabel.js +62 -0
  485. package/react/components/Form/FormRow.d.ts +17 -0
  486. package/react/components/Form/FormRow.js +64 -0
  487. package/react/components/Form/FormRowNew.d.ts +12 -0
  488. package/react/components/Form/FormRowNew.js +67 -0
  489. package/react/components/Form/FormText.d.ts +8 -0
  490. package/react/components/Form/FormText.js +49 -0
  491. package/react/components/Form/InputBase.d.ts +41 -0
  492. package/react/components/Form/InputBase.js +86 -0
  493. package/react/components/Form/InputNew.d.ts +45 -0
  494. package/react/components/Form/InputNew.js +75 -0
  495. package/react/components/Form/InputWrapper.d.ts +28 -0
  496. package/react/components/Form/InputWrapper.js +91 -0
  497. package/react/components/Form/index.d.ts +9 -0
  498. package/react/components/Form/index.js +21 -0
  499. package/react/components/FormLabel.js +5 -3
  500. package/react/components/GridItem.js +9 -7
  501. package/react/components/GridList.js +8 -6
  502. package/react/components/HeadingText.js +4 -2
  503. package/react/components/HelloWorld.js +4 -2
  504. package/react/components/Icon.d.ts +2 -1
  505. package/react/components/Icon.js +9 -6
  506. package/react/components/IconButton.d.ts +9 -2
  507. package/react/components/IconButton.js +17 -7
  508. package/react/components/IconLabel.d.ts +2 -0
  509. package/react/components/IconLabel.js +12 -7
  510. package/react/components/IconPicker.js +13 -9
  511. package/react/components/Input.d.ts +25 -7
  512. package/react/components/Input.js +21 -38
  513. package/react/components/Label.d.ts +2 -0
  514. package/react/components/Label.js +44 -11
  515. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  516. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  517. package/react/components/Layouts/AuthoringContainer.d.ts +12 -0
  518. package/react/components/Layouts/AuthoringContainer.js +60 -0
  519. package/react/components/Layouts/AuthoringFrame.d.ts +19 -0
  520. package/react/components/Layouts/AuthoringFrame.js +58 -0
  521. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  522. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  523. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  524. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  525. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  526. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  527. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  528. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  529. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  530. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  531. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +15 -0
  532. package/react/components/Layouts/AuthoringFrameRightBar.js +60 -0
  533. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  534. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  535. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  536. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  537. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  538. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  539. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  540. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  541. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  542. package/react/components/Layouts/AuthoringMain.js +55 -0
  543. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  544. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  545. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  546. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  547. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  548. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  549. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  550. package/react/components/Layouts/BottomBarAction.js +59 -0
  551. package/react/components/Layouts/Container.d.ts +14 -0
  552. package/react/components/Layouts/Container.js +62 -0
  553. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  554. package/react/components/Layouts/ContentSplitter.js +58 -0
  555. package/react/components/Layouts/CoreLayout.d.ts +20 -0
  556. package/react/components/Layouts/CoreLayout.js +55 -0
  557. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  558. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  559. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  560. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  561. package/react/components/Layouts/CoreLayoutMain.d.ts +10 -0
  562. package/react/components/Layouts/CoreLayoutMain.js +56 -0
  563. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  564. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  565. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  566. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  567. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  568. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  569. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  570. package/react/components/Layouts/HamburgerButton.js +63 -0
  571. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  572. package/react/components/Layouts/HeaderPanel.js +49 -0
  573. package/react/components/Layouts/Layout.d.ts +8 -0
  574. package/react/components/Layouts/Layout.js +36 -0
  575. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  576. package/react/components/Layouts/LayoutContainer.js +49 -0
  577. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  578. package/react/components/Layouts/LeftPanel.js +56 -0
  579. package/react/components/Layouts/MainMenu.d.ts +41 -0
  580. package/react/components/Layouts/MainMenu.js +103 -0
  581. package/react/components/Layouts/MainPanel.d.ts +11 -0
  582. package/react/components/Layouts/MainPanel.js +59 -0
  583. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  584. package/react/components/Layouts/NotificationPanel.js +110 -0
  585. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  586. package/react/components/Layouts/OverlayPanel.js +51 -0
  587. package/react/components/Layouts/PageLayout.d.ts +16 -0
  588. package/react/components/Layouts/PageLayout.js +66 -0
  589. package/react/components/Layouts/Panel.d.ts +66 -0
  590. package/react/components/Layouts/Panel.js +168 -0
  591. package/react/components/Layouts/RightPanel.d.ts +9 -0
  592. package/react/components/Layouts/RightPanel.js +49 -0
  593. package/react/components/Layouts/index.d.ts +39 -0
  594. package/react/components/Layouts/index.js +86 -0
  595. package/react/components/LeftMenu.d.ts +13 -4
  596. package/react/components/LeftMenu.js +71 -18
  597. package/react/components/ListItemLoader.js +4 -2
  598. package/react/components/Lists/BoxedList.d.ts +44 -0
  599. package/react/components/Lists/BoxedList.js +160 -0
  600. package/react/components/Lists/ContentList.d.ts +51 -0
  601. package/react/components/Lists/ContentList.js +110 -0
  602. package/react/components/Lists/SimpleList.d.ts +21 -0
  603. package/react/components/Lists/SimpleList.js +80 -0
  604. package/react/components/Lists/TableList.d.ts +64 -0
  605. package/react/components/Lists/TableList.js +240 -0
  606. package/react/components/Lists/index.d.ts +2 -0
  607. package/react/components/Lists/index.js +10 -0
  608. package/react/components/Loader.js +4 -2
  609. package/react/components/Menu.d.ts +2 -1
  610. package/react/components/Menu.js +48 -12
  611. package/react/components/Modal.d.ts +7 -2
  612. package/react/components/Modal.js +35 -5
  613. package/react/components/MultiSelect.d.ts +40 -0
  614. package/react/components/MultiSelect.js +70 -0
  615. package/react/components/NavButton.d.ts +2 -1
  616. package/react/components/NavButton.js +9 -4
  617. package/react/components/Navigation/BottomNav.d.ts +24 -0
  618. package/react/components/Navigation/BottomNav.js +88 -0
  619. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  620. package/react/components/Navigation/QuickNavBar.js +117 -0
  621. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  622. package/react/components/Navigation/SideBarMenu.js +79 -0
  623. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  624. package/react/components/Navigation/SideBarTabs.js +88 -0
  625. package/react/components/Navigation/index.d.ts +3 -0
  626. package/react/components/Navigation/index.js +9 -0
  627. package/react/components/Popover.js +4 -2
  628. package/react/components/PropsList.js +4 -2
  629. package/react/components/RadioButtonGroup.d.ts +29 -0
  630. package/react/components/RadioButtonGroup.js +91 -0
  631. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  632. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  633. package/react/components/SearchBar.d.ts +24 -0
  634. package/react/components/SearchBar.js +113 -0
  635. package/react/components/Select.d.ts +7 -2
  636. package/react/components/Select.js +9 -29
  637. package/react/components/SelectGrid.d.ts +1 -1
  638. package/react/components/SelectGrid.js +44 -23
  639. package/react/components/SelectWithTemplate.d.ts +11 -1
  640. package/react/components/SelectWithTemplate.js +23 -12
  641. package/react/components/Skeleton.d.ts +1 -1
  642. package/react/components/Skeleton.js +26 -5
  643. package/react/components/SlidingToolbar.d.ts +1 -1
  644. package/react/components/SlidingToolbar.js +15 -3
  645. package/react/components/Spinner.d.ts +0 -1
  646. package/react/components/Spinner.js +7 -6
  647. package/react/components/StrechBar.js +4 -2
  648. package/react/components/SubNav.d.ts +8 -1
  649. package/react/components/SubNav.js +28 -8
  650. package/react/components/Switch.d.ts +4 -1
  651. package/react/components/Switch.js +25 -11
  652. package/react/components/SwitchGroup.d.ts +1 -0
  653. package/react/components/SwitchGroup.js +6 -4
  654. package/react/components/TabCustom.d.ts +11 -22
  655. package/react/components/TabCustom.js +32 -57
  656. package/react/components/TabList.d.ts +2 -11
  657. package/react/components/TabList.js +17 -36
  658. package/react/components/Tag.d.ts +4 -4
  659. package/react/components/Tag.js +21 -9
  660. package/react/components/TagInput.d.ts +0 -1
  661. package/react/components/TagInput.js +7 -6
  662. package/react/components/TagInputTest.js +13 -9
  663. package/react/components/Text/Heading.d.ts +15 -0
  664. package/react/components/Text/Heading.js +79 -0
  665. package/react/components/Text/Text.d.ts +15 -0
  666. package/react/components/Text/Text.js +67 -0
  667. package/react/components/Text/Time.d.ts +15 -0
  668. package/react/components/Text/Time.js +65 -0
  669. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  670. package/react/components/ThemeSelector.js +114 -0
  671. package/react/components/TimePicker.d.ts +11 -1
  672. package/react/components/TimePicker.js +14 -5
  673. package/react/components/Toast.js +1 -1
  674. package/react/components/ToastMessage.js +6 -5
  675. package/react/components/ToastText.js +1 -1
  676. package/react/components/ToastWrapper.d.ts +2 -2
  677. package/react/components/ToastWrapper.js +14 -10
  678. package/react/components/Togglebox.d.ts +2 -1
  679. package/react/components/Togglebox.js +42 -14
  680. package/react/components/Tooltip.d.ts +1 -0
  681. package/react/components/Tooltip.js +14 -10
  682. package/react/components/TreeSelect.d.ts +82 -0
  683. package/react/components/TreeSelect.js +521 -0
  684. package/react/components/WithSizeObserver.d.ts +25 -0
  685. package/react/components/WithSizeObserver.js +95 -0
  686. package/react/components/_Positioner.js +4 -2
  687. package/react/helpers.d.ts +1 -0
  688. package/react/helpers.js +7 -0
  689. package/react/index.d.ts +26 -4
  690. package/react/index.js +62 -6
  691. package/app/styles/_editor-themes.scss +0 -326
  692. package/app/styles/variables/_design-tokens-general.scss +0 -76
  693. package/app-typescript/components/Radio.tsx +0 -57
  694. package/app-typescript/components/RadioButton.tsx +0 -57
  695. package/dist/react/Radios.tsx +0 -391
  696. package/examples/pages/react/Radios.tsx +0 -391
  697. package/patches/@superdesk+primereact+5.0.2-4.patch +0 -13
  698. package/react/components/RadioButton.js +0 -65
@@ -1,8 +1,7 @@
1
1
  import * as React from 'react';
2
-
3
2
  import * as Markup from '../../js/react';
4
3
 
5
- import {AvatarWrapper, AvatarContentText, AvatarContentImage} from '../../../app-typescript';
4
+ import {AvatarWrapper, AvatarContentText, AvatarContentImage, AvatarGroup, Container, PropsList, Prop} from '../../../app-typescript';
6
5
 
7
6
  export default class AvatarDoc extends React.PureComponent {
8
7
  render() {
@@ -10,189 +9,377 @@ export default class AvatarDoc extends React.PureComponent {
10
9
  <section className="docs-page__container">
11
10
  <h2 className="docs-page__h2">Avatar</h2>
12
11
 
13
- <Markup.ReactMarkup>
12
+ <Markup.ReactMarkupCodePreview>{`
13
+ <AvatarWrapper
14
+ size="small"
15
+ statusIndicator={{status: 'online', tooltipText: "Online"}}
16
+ administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
17
+ >
18
+ <AvatarContentText text="JD" tooltipText="John Doe" />
19
+ </AvatarWrapper>
20
+ `}
21
+ </Markup.ReactMarkupCodePreview>
14
22
 
23
+ <Markup.ReactMarkup>
15
24
  <Markup.ReactMarkupPreview>
16
- <AvatarWrapper
17
- size="small"
18
- statusIndicator={{status: 'online', tooltipText: "Online"}}
19
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
20
- >
21
- <AvatarContentText text="ABC" tooltipText="John Doe" />
22
- </AvatarWrapper>
23
-
24
- <br />
25
+ <p className="docs-page__paragraph">// Basic with size variations</p>
26
+ <Container gap='medium' className='sd-margin-b--3'>
27
+
28
+ <AvatarWrapper size="small">
29
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
30
+ </AvatarWrapper>
31
+
32
+ <AvatarWrapper size="medium">
33
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
34
+ </AvatarWrapper>
35
+
36
+ <AvatarWrapper size="large">
37
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="The Dude" />
38
+ </AvatarWrapper>
39
+
40
+ <AvatarWrapper size="x-large">
41
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
42
+ </AvatarWrapper>
43
+
44
+ <AvatarWrapper size="xx-large">
45
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="The Dude" />
46
+ </AvatarWrapper>
47
+
48
+ </Container>
49
+
50
+ <p className="docs-page__paragraph">// With status indicator</p>
51
+ <Container gap='medium' className='sd-margin-b--3'>
52
+ <AvatarWrapper
53
+ size="large"
54
+ statusIndicator={{status: 'online', tooltipText: "Online"}}
55
+ >
56
+ <AvatarContentText text="JJB" tooltipText="Jean Jacques Burnel" />
57
+ </AvatarWrapper>
58
+
59
+ <AvatarWrapper
60
+ size="large"
61
+ statusIndicator={{status: 'offline', tooltipText: "Offline"}}
62
+ >
63
+ <AvatarContentImage tooltipText="Jean Jacques Burnel" />
64
+ </AvatarWrapper>
65
+
66
+ <AvatarWrapper
67
+ size="large"
68
+ statusIndicator={{status: 'offline', tooltipText: "Offline"}}
69
+ >
70
+ <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
71
+ </AvatarWrapper>
72
+ </Container>
73
+
74
+ <p className="docs-page__paragraph">// With administrator indicator</p>
75
+ <Container gap='medium' className='sd-margin-b--3'>
76
+ <AvatarWrapper
77
+ size="large"
78
+ administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
79
+ >
80
+ <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
81
+ </AvatarWrapper>
82
+
83
+ <AvatarWrapper
84
+ size="large"
85
+ administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
86
+ >
87
+ <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
88
+ </AvatarWrapper>
89
+
90
+ <AvatarWrapper
91
+ size="large"
92
+ administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
93
+ >
94
+ <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
95
+ </AvatarWrapper>
96
+ </Container>
97
+
98
+ <p className="docs-page__paragraph">// Combo</p>
99
+ <Container gap='medium' className='sd-margin-b--3'>
100
+ <AvatarWrapper
101
+ size="large"
102
+ statusIndicator={{status: 'online', tooltipText: "Online"}}
103
+ administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
104
+ >
105
+ <AvatarContentText text="DH" tooltipText="Debbie Harry" />
106
+ </AvatarWrapper>
107
+
108
+ <AvatarWrapper
109
+ size="large"
110
+ statusIndicator={{status: 'offline', tooltipText: "Offline"}}
111
+ administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
112
+ >
113
+ <AvatarContentImage tooltipText="Debbie Harry" />
114
+ </AvatarWrapper>
115
+
116
+ <AvatarWrapper
117
+ size="large"
118
+ statusIndicator={{status: 'offline', tooltipText: "Offline"}}
119
+ administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
120
+ >
121
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
122
+ </AvatarWrapper>
123
+ </Container>
124
+ </Markup.ReactMarkupPreview>
25
125
 
26
- <AvatarWrapper
27
- size="medium"
28
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
29
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
30
- >
31
- <AvatarContentText text="ABC" tooltipText="John Doe" />
126
+ <Markup.ReactMarkupCode>{`
127
+ // Basic with size variations
128
+ <AvatarWrapper size="small">
129
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Jeffrey Lebowski" />
32
130
  </AvatarWrapper>
33
131
 
34
- <br />
35
-
36
- <AvatarWrapper
37
- size="large"
38
- statusIndicator={{status: 'online', tooltipText: "Online"}}
39
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
40
- >
41
- <AvatarContentText text="ABC" tooltipText="John Doe" />
132
+ <AvatarWrapper size="medium">
133
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
42
134
  </AvatarWrapper>
43
135
 
44
- <br />
45
-
46
- <AvatarWrapper
47
- size="small"
48
- statusIndicator={{status: 'online', tooltipText: "Online"}}
49
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
50
- >
51
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
136
+ <AvatarWrapper size="large">
137
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="The Dude" />
52
138
  </AvatarWrapper>
53
-
54
- <br />
55
-
56
- <AvatarWrapper
57
- size="medium"
58
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
59
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
60
- >
61
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
139
+
140
+ <AvatarWrapper size="x-large">
141
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
62
142
  </AvatarWrapper>
63
143
 
64
- <br />
65
-
66
- <AvatarWrapper
67
- size="large"
68
- statusIndicator={{status: 'online', tooltipText: "Online"}}
69
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
70
- >
71
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
144
+ <AvatarWrapper size="xx-large">
145
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="The Dude" />
72
146
  </AvatarWrapper>
73
147
 
74
- <br />
75
148
 
149
+ // With status indicator
76
150
  <AvatarWrapper
77
- size="small"
151
+ size="large"
78
152
  statusIndicator={{status: 'online', tooltipText: "Online"}}
79
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
80
153
  >
81
- <AvatarContentImage tooltipText="John Doe" />
154
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
82
155
  </AvatarWrapper>
83
156
 
84
- <br />
85
-
86
157
  <AvatarWrapper
87
- size="medium"
158
+ size="large"
88
159
  statusIndicator={{status: 'offline', tooltipText: "Offline"}}
89
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
90
160
  >
91
- <AvatarContentImage tooltipText="John Doe" />
161
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Jeffrey Lebowski" />
92
162
  </AvatarWrapper>
93
163
 
94
- <br />
95
-
164
+ // With administrator indicator
165
+ <Container gap='medium' className='sd-margin-b--3'>
96
166
  <AvatarWrapper
97
167
  size="large"
98
- statusIndicator={{status: 'online', tooltipText: "Online"}}
99
168
  administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
100
169
  >
101
- <AvatarContentImage tooltipText="John Doe" />
170
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
102
171
  </AvatarWrapper>
103
- </Markup.ReactMarkupPreview>
104
-
105
- <Markup.ReactMarkupCode>{`
106
- <AvatarWrapper
107
- size="small"
108
- statusIndicator={{status: 'online', tooltipText: "Online"}}
109
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
110
- >
111
- <AvatarContentText text="ABC" tooltipText="John Doe" />
112
- </AvatarWrapper>
113
-
114
- <br />
115
-
116
- <AvatarWrapper
117
- size="medium"
118
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
119
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
120
- >
121
- <AvatarContentText text="ABC" tooltipText="John Doe" />
122
- </AvatarWrapper>
123
-
124
- <br />
125
172
 
126
173
  <AvatarWrapper
127
174
  size="large"
128
- statusIndicator={{status: 'online', tooltipText: "Online"}}
129
175
  administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
130
176
  >
131
- <AvatarContentText text="ABC" tooltipText="John Doe" />
177
+ <AvatarContentImage tooltipText="Jeffrey Lebowski" />
132
178
  </AvatarWrapper>
133
179
 
134
- <br />
135
-
180
+ // Combo
136
181
  <AvatarWrapper
137
- size="small"
182
+ size="large"
138
183
  statusIndicator={{status: 'online', tooltipText: "Online"}}
139
184
  administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
140
185
  >
141
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
186
+ <AvatarContentText text="DH" tooltipText="Debbie Harry" />
142
187
  </AvatarWrapper>
143
188
 
144
- <br />
145
-
146
189
  <AvatarWrapper
147
- size="medium"
190
+ size="large"
148
191
  statusIndicator={{status: 'offline', tooltipText: "Offline"}}
149
192
  administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
150
193
  >
151
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
194
+ <AvatarContentImage tooltipText="Debbie Harry" />
152
195
  </AvatarWrapper>
153
196
 
154
- <br />
155
-
156
197
  <AvatarWrapper
157
198
  size="large"
158
- statusIndicator={{status: 'online', tooltipText: "Online"}}
159
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
160
- >
161
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
162
- </AvatarWrapper>
163
-
164
- <br />
165
-
166
- <AvatarWrapper
167
- size="small"
168
- statusIndicator={{status: 'online', tooltipText: "Online"}}
169
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
170
- >
171
- <AvatarContentImage tooltipText="John Doe" />
172
- </AvatarWrapper>
173
-
174
- <br />
175
-
176
- <AvatarWrapper
177
- size="medium"
178
199
  statusIndicator={{status: 'offline', tooltipText: "Offline"}}
179
200
  administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
180
201
  >
181
- <AvatarContentImage tooltipText="John Doe" />
202
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
182
203
  </AvatarWrapper>
204
+ `}
205
+ </Markup.ReactMarkupCode>
206
+ </Markup.ReactMarkup>
183
207
 
184
- <br />
208
+ <h3 className="docs-page__h3 docs-page__h3--small-top-m">AvatarGroup</h3>
209
+ <p className='docs-page__paragraph'></p>
210
+ <Markup.ReactMarkup>
211
+ <Markup.ReactMarkupPreview>
212
+ <p className="docs-page__paragraph">// Stacked</p>
213
+ <AvatarGroup>
214
+ <AvatarWrapper size="large">
215
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
216
+ </AvatarWrapper>
217
+
218
+ <AvatarWrapper size="large">
219
+ <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
220
+ </AvatarWrapper>
221
+
222
+ <AvatarWrapper size="large">
223
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
224
+ </AvatarWrapper>
225
+
226
+ <AvatarWrapper size="large">
227
+ <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
228
+ </AvatarWrapper>
229
+
230
+ <AvatarWrapper size="large">
231
+ <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
232
+ </AvatarWrapper>
233
+ {/* <AvatarWrapper size="large">
234
+ <AvatarContentText text="6+" tooltipText="6 more" />
235
+ </AvatarWrapper> */}
236
+ </AvatarGroup>
237
+
238
+ <p className="docs-page__paragraph">// Grid</p>
239
+ <AvatarGroup appearance='grid' className='sd-width--xx-small'>
240
+
241
+ <AvatarWrapper size="large">
242
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
243
+ </AvatarWrapper>
244
+
245
+ <AvatarWrapper size="large">
246
+ <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
247
+ </AvatarWrapper>
248
+
249
+ <AvatarWrapper size="large">
250
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
251
+ </AvatarWrapper>
252
+
253
+ <AvatarWrapper size="large">
254
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Biggie Smalls" />
255
+ </AvatarWrapper>
256
+
257
+ <AvatarWrapper size="large">
258
+ <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
259
+ </AvatarWrapper>
260
+
261
+ <AvatarWrapper size="large">
262
+ <AvatarContentImage tooltipText="John Doe" />
263
+ </AvatarWrapper>
264
+
265
+ <AvatarWrapper size="large">
266
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
267
+ </AvatarWrapper>
268
+
269
+ <AvatarWrapper size="large">
270
+ <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
271
+ </AvatarWrapper>
272
+
273
+ <AvatarWrapper size="large">
274
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
275
+ </AvatarWrapper>
276
+
277
+ <AvatarWrapper size="large">
278
+ <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
279
+ </AvatarWrapper>
280
+
281
+ </AvatarGroup>
282
+ </Markup.ReactMarkupPreview>
185
283
 
186
- <AvatarWrapper
187
- size="large"
188
- statusIndicator={{status: 'online', tooltipText: "Online"}}
189
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
190
- >
191
- <AvatarContentImage tooltipText="John Doe" />
192
- </AvatarWrapper>
284
+ <Markup.ReactMarkupCode>{`
285
+ // Stacked
286
+ <AvatarGroup>
287
+ <AvatarWrapper size="large">
288
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
289
+ </AvatarWrapper>
290
+
291
+ <AvatarWrapper size="large">
292
+ <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
293
+ </AvatarWrapper>
294
+
295
+ <AvatarWrapper size="large">
296
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
297
+ </AvatarWrapper>
298
+
299
+ <AvatarWrapper size="large">
300
+ <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
301
+ </AvatarWrapper>
302
+
303
+ <AvatarWrapper size="large">
304
+ <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
305
+ </AvatarWrapper>
306
+ </AvatarGroup>
307
+
308
+ // Grid
309
+ <AvatarGroup appearance='grid' className='sd-width--xx-small'>
310
+ <AvatarWrapper size="large">
311
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
312
+ </AvatarWrapper>
313
+
314
+ <AvatarWrapper size="large">
315
+ <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
316
+ </AvatarWrapper>
317
+
318
+ <AvatarWrapper size="large">
319
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
320
+ </AvatarWrapper>
321
+
322
+ <AvatarWrapper size="large">
323
+ <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Biggie Smalls" />
324
+ </AvatarWrapper>
325
+
326
+ <AvatarWrapper size="large">
327
+ <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
328
+ </AvatarWrapper>
329
+
330
+ <AvatarWrapper size="large">
331
+ <AvatarContentImage tooltipText="John Doe" />
332
+ </AvatarWrapper>
333
+
334
+ <AvatarWrapper size="large">
335
+ <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
336
+ </AvatarWrapper>
337
+
338
+ <AvatarWrapper size="large">
339
+ <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
340
+ </AvatarWrapper>
341
+
342
+ <AvatarWrapper size="large">
343
+ <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
344
+ </AvatarWrapper>
345
+
346
+ <AvatarWrapper size="large">
347
+ <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
348
+ </AvatarWrapper>
349
+ </AvatarGroup>
193
350
  `}
194
351
  </Markup.ReactMarkupCode>
195
352
  </Markup.ReactMarkup>
353
+
354
+ <h3 className="docs-page__h3">Avatar props</h3>
355
+ <p className="docs-page__paragraph">AvatarWrapper</p>
356
+ <PropsList>
357
+ <Prop name='size' isRequired={false} type='small | medium | large | x-large | xx-large' default='medium' description='Display size of the Avatar.'/>
358
+ <Prop name='statusIndicator' isRequired={false} type='group' default='/' description='Optional prop group to display the status of the user.'/>
359
+ <Prop name='statusIndicator status' isRequired={true} type='online | offline' default='/' description='Indicates if the user is online or offline'/>
360
+ <Prop name='statusIndicator tooltipText' isRequired={false} type='string' default='/' description='Optional tooltip value for the status indicator.'/>
361
+ <Prop name='administratorIndicator' isRequired={false} type='group' default='/' description='Optional prop group to display that the user is an administrator.'/>
362
+ <Prop name='administratorIndicator enabled' isRequired={true} type='boolean' default='/' description='Indicates that the user is an admistrator if set to true.'/>
363
+ <Prop name='administratorIndicator tooltipText' isRequired={false} type='string' default='/' description='Optional tooltip value for the administrator indicator.'/>
364
+ </PropsList>
365
+
366
+ <p className="docs-page__paragraph">AvatarContentText</p>
367
+ <PropsList>
368
+ <Prop name='text' isRequired={true} type='string' default='/' description='Visible text value of the avatar, limited to 3 charactes.'/>
369
+ <Prop name='tooltipText' isRequired={false} type='string' default='/' description='Tooltip value, displayed on hover.'/>
370
+ </PropsList>
371
+
372
+ <p className="docs-page__paragraph">AvatarContentImage</p>
373
+ <PropsList>
374
+ <Prop name='imageUrl' isRequired={true} type='string' default='/' description='URL of the avatar image. A placeholder image will be displayed if not set.'/>
375
+ <Prop name='tooltipText' isRequired={false} type='string' default='/' description='Tooltip value, displayed on hover.'/>
376
+ </PropsList>
377
+ <h3 className="docs-page__h3">AvatarGroup</h3>
378
+ <PropsList>
379
+ <Prop name='appearance' isRequired={false} type='stacked | grid' default='stacked' description='Appearance of the Avatar group. Stacked displays the Avatars in an horizontal list, with slightly overlapped avatars.'/>
380
+ <Prop name='borderColor' isRequired={false} type='000 | 050 | 100 | 150 | 200' default='000' description='Border color for stacked avatars. Should be matched with the parent background colour.'/>
381
+ <Prop name='className' isRequired={false} type='online | offline' default='/' description='Add helper classes for margins, paddings etc.'/>
382
+ </PropsList>
196
383
  </section>
197
384
  );
198
385
  }
@@ -89,6 +89,16 @@ export default class BadgeDoc extends React.Component {
89
89
  <Badge text='E' color='purple--400' shape='square' />
90
90
  <Badge text='F' color='purple--500' shape='square' />
91
91
  </div>
92
+
93
+ <p className="docs-page__paragraph">// Custom hex colours</p>
94
+ <div className='docs-page__content-row'>
95
+ <Badge text='1' hexColor='#008773' />
96
+ <Badge text='2' hexColor='#0000FF' />
97
+ <Badge text='3' hexColor='#00D100' />
98
+ <Badge text='4' hexColor='#5531D9' shape='square' />
99
+ <Badge text='5' hexColor='#960E0F' shape='square' />
100
+ <Badge text='6' hexColor='#DB60FF' shape='square' />
101
+ </div>
92
102
  </Markup.ReactMarkupPreview>
93
103
  <Markup.ReactMarkupCode>{`
94
104
  // Basic colour palette
@@ -112,6 +122,13 @@ export default class BadgeDoc extends React.Component {
112
122
  <Badge text='D' color='purple--300' shape='square'/>
113
123
  <Badge text='E' color='purple--400' shape='square'/>
114
124
  <Badge text='F' color='purple--500' shape='square'/>
125
+ // Custom hex colours
126
+ <Badge text='1' hexColor='#008773' />
127
+ <Badge text='2' hexColor='#0000FF' />
128
+ <Badge text='3' hexColor='#00D100' />
129
+ <Badge text='4' hexColor='#5531D9' shape='square' />
130
+ <Badge text='5' hexColor='#960E0F' shape='square' />
131
+ <Badge text='6' hexColor='#DB60FF' shape='square' />
115
132
  `}
116
133
  </Markup.ReactMarkupCode>
117
134
  </Markup.ReactMarkup>
@@ -152,6 +169,7 @@ export default class BadgeDoc extends React.Component {
152
169
  <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.)' />
153
170
  <Prop name='color' isRequired={false} type='string' default='/' description='Extended color palette from the framework (e.g. red--500); NOTE: The badge can have either a Type or Color defined, not both at the same time.' />
154
171
  <Prop name='shape' isRequired={false} type='round | square' default='round' description='Make shape of badge square or default round.' />
172
+ <Prop name='hexColor' isRequired={false} type='string' default='/' description='Define a custom Hex colour for the Badge.'/>
155
173
  </PropsList>
156
174
  </section>
157
175
  )