superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

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 (519) 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 +1 -0
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/img/dots.svg +3 -0
  10. package/app/img/spinner.svg +3 -0
  11. package/app/img/themes/theme-base.svg +1 -0
  12. package/app/img/themes/theme-contrast.svg +45 -0
  13. package/app/img/themes/theme-dark.svg +1 -0
  14. package/app/img/themes/theme-light.svg +1 -0
  15. package/app/index.js +2 -1
  16. package/app/scripts/check.js +1 -1
  17. package/app/scripts/modals.js +1 -0
  18. package/app/styles/_accessibility.scss +308 -6
  19. package/app/styles/_alerts.scss +227 -97
  20. package/app/styles/_avatar.scss +60 -33
  21. package/app/styles/_badge.scss +55 -26
  22. package/app/styles/_big-icon-font.scss +61 -23
  23. package/app/styles/_boxed-list.scss +67 -23
  24. package/app/styles/_buttons.scss +548 -1026
  25. package/app/styles/_carousel.scss +19 -13
  26. package/app/styles/_content-divider.scss +125 -0
  27. package/app/styles/_design-tokens.scss +2 -0
  28. package/app/styles/_drag-drop.scss +1 -1
  29. package/app/styles/_empty-states.scss +9 -1
  30. package/app/styles/_helpers.scss +654 -311
  31. package/app/styles/_icon-font.scss +343 -309
  32. package/app/styles/_icon-labels.scss +69 -14
  33. package/app/styles/_labels.scss +65 -52
  34. package/app/styles/_loaders.scss +28 -0
  35. package/app/styles/_master-desk.scss +11 -11
  36. package/app/styles/_mixins.scss +21 -13
  37. package/app/styles/_modals.scss +103 -116
  38. package/app/styles/_normalize.scss +1 -0
  39. package/app/styles/_panel-info.scss +21 -16
  40. package/app/styles/_popover.scss +2 -2
  41. package/app/styles/_pr-superdesk-theme.scss +4 -0
  42. package/app/styles/_publisher-styles.scss +182 -0
  43. package/app/styles/_reboot.scss +1 -0
  44. package/app/styles/_sd-tag-input.scss +184 -97
  45. package/app/styles/_simple-list.scss +41 -19
  46. package/app/styles/_table-list.scss +244 -0
  47. package/app/styles/_tables.scss +5 -4
  48. package/app/styles/_tabs.scss +24 -75
  49. package/app/styles/_tag-labels.scss +47 -47
  50. package/app/styles/_thumb-carousel.scss +11 -10
  51. package/app/styles/_toggle-box.scss +52 -46
  52. package/app/styles/_toggle-button.scss +42 -0
  53. package/app/styles/_tooltips.scss +55 -98
  54. package/app/styles/_variables.scss +0 -1
  55. package/app/styles/app.scss +17 -1
  56. package/app/styles/components/_card-item.scss +41 -28
  57. package/app/styles/components/_list-item.scss +47 -113
  58. package/app/styles/components/_sd-circular-progress.scss +1 -1
  59. package/app/styles/components/_sd-collapse-box.scss +6 -33
  60. package/app/styles/components/_sd-comment-box.scss +1 -1
  61. package/app/styles/components/_sd-dropzone.scss +114 -0
  62. package/app/styles/components/_sd-grid-item.scss +78 -180
  63. package/app/styles/components/_sd-loader.scss +1 -16
  64. package/app/styles/components/_sd-media-carousel.scss +10 -12
  65. package/app/styles/components/_sd-photo-preview.scss +13 -13
  66. package/app/styles/components/_sd-searchbar.scss +43 -127
  67. package/app/styles/components/_sd-toaster.scss +13 -6
  68. package/app/styles/components/_subnav.scss +172 -171
  69. package/app/styles/components/_theme-selector.scss +189 -0
  70. package/app/styles/components/sd-slider.scss +11 -11
  71. package/app/styles/design-tokens/_design-tokens-general.scss +84 -0
  72. package/app/styles/design-tokens/_new-colors.scss +702 -0
  73. package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
  74. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  75. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  76. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  77. package/app/styles/editor/_editor-buttons.scss +54 -0
  78. package/app/styles/editor/_editor-themes.scss +437 -0
  79. package/app/styles/form-elements/_autocomplete.scss +12 -41
  80. package/app/styles/form-elements/_checkbox.scss +180 -245
  81. package/app/styles/form-elements/_forms-general.scss +92 -20
  82. package/app/styles/form-elements/_inputs.scss +100 -350
  83. package/app/styles/form-elements/_radio.scss +6 -6
  84. package/app/styles/form-elements/_select-grid.scss +16 -14
  85. package/app/styles/form-elements/_switch.scss +26 -47
  86. package/app/styles/grids/_basic-grid.scss +52 -26
  87. package/app/styles/grids/_grid-layout.scss +114 -65
  88. package/app/styles/grids/_layout-grid.scss +6 -6
  89. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  90. package/app/styles/interface-elements/_side-panel.scss +115 -83
  91. package/app/styles/layout/_basic-layout.scss +11 -19
  92. package/app/styles/layout/_container.scss +35 -0
  93. package/app/styles/layout/_editor.scss +398 -0
  94. package/app/styles/layout/_general.scss +4 -5
  95. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  96. package/app/styles/menus/_sd-left-navigation.scss +34 -18
  97. package/app/styles/menus/_sd-sidebar-menu.scss +123 -25
  98. package/app/styles/menus/_sd-top-menu.scss +3 -3
  99. package/app/styles/primereact/_pr-datepicker.scss +60 -9
  100. package/app/styles/primereact/_pr-dialog.scss +131 -30
  101. package/app/styles/primereact/_pr-dropdown.scss +177 -19
  102. package/app/styles/primereact/_pr-general.scss +14 -7
  103. package/app/styles/primereact/_pr-menu.scss +9 -12
  104. package/app/styles/variables/_colors.scss +124 -516
  105. package/app/styles/variables/_dimensions.scss +82 -4
  106. package/app/styles/variables/_form-elements.scss +0 -2
  107. package/app/styles/variables/_typography.scss +2 -0
  108. package/app-typescript/components/Alert.tsx +16 -1
  109. package/app-typescript/components/Avatar.tsx +21 -0
  110. package/app-typescript/components/ButtonGroup.tsx +9 -5
  111. package/app-typescript/components/Carousel.tsx +1 -1
  112. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  113. package/app-typescript/components/CheckGroup.tsx +2 -1
  114. package/app-typescript/components/Checkbox.tsx +7 -3
  115. package/app-typescript/components/CheckboxButton.tsx +9 -2
  116. package/app-typescript/components/ContentDivider.tsx +34 -0
  117. package/app-typescript/components/CreateButton.tsx +38 -0
  118. package/app-typescript/components/DatePicker.tsx +6 -2
  119. package/app-typescript/components/DropZone.tsx +89 -0
  120. package/app-typescript/components/Dropdown.tsx +30 -11
  121. package/app-typescript/components/DropdownFirst.tsx +1 -1
  122. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  123. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  124. package/app-typescript/components/Form/FormItem.tsx +20 -0
  125. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  126. package/app-typescript/components/Form/FormRow.tsx +40 -0
  127. package/app-typescript/components/Form/FormText.tsx +15 -0
  128. package/app-typescript/components/Form/index.tsx +5 -0
  129. package/app-typescript/components/Icon.tsx +3 -1
  130. package/app-typescript/components/IconButton.tsx +26 -12
  131. package/app-typescript/components/IconLabel.tsx +8 -1
  132. package/app-typescript/components/Input.tsx +39 -20
  133. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  134. package/app-typescript/components/Layouts/AuthoringContainer.tsx +27 -0
  135. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  136. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  137. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  138. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  141. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  142. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  143. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  144. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  145. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  146. package/app-typescript/components/Layouts/AuthoringMain.tsx +50 -0
  147. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  148. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  149. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -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/HeaderPanel.tsx +15 -0
  153. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  154. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  155. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  156. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  157. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  158. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  159. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  160. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  161. package/app-typescript/components/Layouts/index.tsx +31 -0
  162. package/app-typescript/components/LeftMenu.tsx +123 -49
  163. package/app-typescript/components/Lists/BoxedList.tsx +137 -0
  164. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  165. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  166. package/app-typescript/components/Lists/TableList.tsx +208 -0
  167. package/app-typescript/components/Lists/index.tsx +2 -0
  168. package/app-typescript/components/Modal.tsx +30 -15
  169. package/app-typescript/components/MultiSelect.tsx +69 -0
  170. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  171. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  172. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  173. package/app-typescript/components/Navigation/index.tsx +3 -0
  174. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  175. package/app-typescript/components/RadioGroup.tsx +69 -0
  176. package/app-typescript/components/SearchBar.tsx +79 -0
  177. package/app-typescript/components/Select.tsx +9 -9
  178. package/app-typescript/components/SelectGrid.tsx +3 -3
  179. package/app-typescript/components/SidebarMenu.tsx +68 -0
  180. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  181. package/app-typescript/components/Spinner.tsx +1 -2
  182. package/app-typescript/components/SubNav.tsx +25 -4
  183. package/app-typescript/components/Switch.tsx +34 -12
  184. package/app-typescript/components/SwitchGroup.tsx +2 -1
  185. package/app-typescript/components/TabCustom.tsx +40 -89
  186. package/app-typescript/components/TabList.tsx +18 -43
  187. package/app-typescript/components/Tag.tsx +32 -9
  188. package/app-typescript/components/Text/Heading.tsx +67 -0
  189. package/app-typescript/components/Text/Text.tsx +36 -0
  190. package/app-typescript/components/ThemeSelector.tsx +113 -0
  191. package/app-typescript/components/TimePicker.tsx +3 -3
  192. package/app-typescript/components/Togglebox.tsx +8 -6
  193. package/app-typescript/components/TreeSelect.tsx +330 -0
  194. package/app-typescript/index.ts +19 -4
  195. package/dist/avatar-2.jpg +0 -0
  196. package/dist/avatar-3.jpg +0 -0
  197. package/dist/avatar-4.jpg +0 -0
  198. package/dist/avatar-5.jpg +0 -0
  199. package/dist/avatar-6.jpg +0 -0
  200. package/dist/avatar_64.png +0 -0
  201. package/dist/components/basic-grid.html +1 -1
  202. package/dist/components/checkbox.html +1 -1
  203. package/dist/dots.svg +3 -0
  204. package/dist/examples.bundle.css +9800 -2768
  205. package/dist/examples.bundle.js +39221 -17840
  206. package/dist/index.html +9 -12
  207. package/dist/playgrounds/boxed-list.html +1 -1
  208. package/dist/playgrounds/cards.html +9 -4
  209. package/dist/playgrounds/editor-3-test.html +15 -0
  210. package/dist/playgrounds/form-layout.html +9 -7
  211. package/dist/playgrounds/layout-test-2.html +40 -36
  212. package/dist/playgrounds/list-item-test.html +1 -1
  213. package/dist/playgrounds/master-desk.html +1 -3
  214. package/dist/playgrounds/photo-desk.html +33 -33
  215. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  216. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  217. package/dist/playgrounds/react-playgrounds/Index.tsx +7 -1
  218. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  219. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  220. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  221. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  222. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  223. package/dist/playgrounds/react-playgrounds/TestGround.tsx +240 -23
  224. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  225. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  226. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  227. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  228. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  229. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  230. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  231. package/dist/playgrounds/tags-input.html +1 -1
  232. package/dist/react/Alerts.tsx +123 -23
  233. package/dist/react/Avatar.tsx +314 -127
  234. package/dist/react/BoxedList.tsx +362 -0
  235. package/dist/react/ButtonGroups.tsx +66 -65
  236. package/dist/react/Buttons.tsx +62 -247
  237. package/dist/react/Carousel.tsx +2 -3
  238. package/dist/react/Checkboxs.tsx +66 -25
  239. package/dist/react/Container.tsx +143 -0
  240. package/dist/react/ContentDivider.tsx +178 -0
  241. package/dist/react/ContentList.tsx +280 -0
  242. package/dist/react/CreateButton.tsx +71 -0
  243. package/dist/react/DropZone.tsx +111 -0
  244. package/dist/react/Heading.tsx +106 -0
  245. package/dist/react/IconButtons.tsx +49 -42
  246. package/dist/react/IconLabels.tsx +24 -2
  247. package/dist/react/Index.tsx +133 -11
  248. package/dist/react/Inputs.tsx +33 -20
  249. package/dist/react/LeftNavigations.tsx +161 -9
  250. package/dist/react/ListItems.tsx +3 -3
  251. package/dist/react/Modal.tsx +174 -19
  252. package/dist/react/MultiSelect.tsx +193 -0
  253. package/dist/react/NavButtons.tsx +4 -4
  254. package/dist/react/Panel.tsx +366 -0
  255. package/dist/react/QuickNavigationBar.tsx +142 -0
  256. package/dist/react/RadioGroup.tsx +351 -0
  257. package/dist/react/SelectWithTemplate.tsx +1 -1
  258. package/dist/react/Selects.tsx +3 -23
  259. package/dist/react/SimpleList.tsx +148 -0
  260. package/dist/react/SubNav.tsx +69 -20
  261. package/dist/react/TableList.tsx +268 -0
  262. package/dist/react/Tabs.tsx +72 -248
  263. package/dist/react/Tags.tsx +52 -13
  264. package/dist/react/Text.tsx +134 -0
  265. package/dist/react/Tooltips.tsx +1 -1
  266. package/dist/react/TreeSelect.tsx +178 -0
  267. package/dist/react.html +4 -0
  268. package/dist/sd_big-icons.eot +0 -0
  269. package/dist/sd_big-icons.svg +55 -53
  270. package/dist/sd_big-icons.ttf +0 -0
  271. package/dist/sd_big-icons.woff +0 -0
  272. package/dist/sd_icons.eot +0 -0
  273. package/dist/sd_icons.svg +1 -0
  274. package/dist/sd_icons.ttf +0 -0
  275. package/dist/sd_icons.woff +0 -0
  276. package/dist/superdesk-ui.bundle.css +51124 -26537
  277. package/dist/superdesk-ui.bundle.js +7849 -3639
  278. package/dist/vendor.bundle.js +71 -75
  279. package/examples/css/docs-page.css +204 -46
  280. package/examples/img/avatar-2.jpg +0 -0
  281. package/examples/img/avatar-3.jpg +0 -0
  282. package/examples/img/avatar-4.jpg +0 -0
  283. package/examples/img/avatar-5.jpg +0 -0
  284. package/examples/img/avatar-6.jpg +0 -0
  285. package/examples/index.html +9 -12
  286. package/examples/index.js +28 -0
  287. package/examples/pages/components/basic-grid.html +1 -1
  288. package/examples/pages/components/checkbox.html +1 -1
  289. package/examples/pages/playgrounds/boxed-list.html +1 -1
  290. package/examples/pages/playgrounds/cards.html +9 -4
  291. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  292. package/examples/pages/playgrounds/form-layout.html +9 -7
  293. package/examples/pages/playgrounds/layout-test-2.html +40 -36
  294. package/examples/pages/playgrounds/list-item-test.html +1 -1
  295. package/examples/pages/playgrounds/master-desk.html +1 -3
  296. package/examples/pages/playgrounds/photo-desk.html +33 -33
  297. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  298. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  299. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +7 -1
  300. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  301. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  302. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  303. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  304. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  305. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +240 -23
  306. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  307. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  308. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  309. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  310. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  311. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  312. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  313. package/examples/pages/playgrounds/tags-input.html +1 -1
  314. package/examples/pages/react/Alerts.tsx +123 -23
  315. package/examples/pages/react/Avatar.tsx +314 -127
  316. package/examples/pages/react/BoxedList.tsx +362 -0
  317. package/examples/pages/react/ButtonGroups.tsx +66 -65
  318. package/examples/pages/react/Buttons.tsx +62 -247
  319. package/examples/pages/react/Carousel.tsx +2 -3
  320. package/examples/pages/react/Checkboxs.tsx +66 -25
  321. package/examples/pages/react/Container.tsx +143 -0
  322. package/examples/pages/react/ContentDivider.tsx +178 -0
  323. package/examples/pages/react/ContentList.tsx +280 -0
  324. package/examples/pages/react/CreateButton.tsx +71 -0
  325. package/examples/pages/react/DropZone.tsx +111 -0
  326. package/examples/pages/react/Heading.tsx +106 -0
  327. package/examples/pages/react/IconButtons.tsx +49 -42
  328. package/examples/pages/react/IconLabels.tsx +24 -2
  329. package/examples/pages/react/Index.tsx +133 -11
  330. package/examples/pages/react/Inputs.tsx +33 -20
  331. package/examples/pages/react/LeftNavigations.tsx +161 -9
  332. package/examples/pages/react/ListItems.tsx +3 -3
  333. package/examples/pages/react/Modal.tsx +174 -19
  334. package/examples/pages/react/MultiSelect.tsx +193 -0
  335. package/examples/pages/react/NavButtons.tsx +4 -4
  336. package/examples/pages/react/Panel.tsx +366 -0
  337. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  338. package/examples/pages/react/RadioGroup.tsx +351 -0
  339. package/examples/pages/react/SelectWithTemplate.tsx +1 -1
  340. package/examples/pages/react/Selects.tsx +3 -23
  341. package/examples/pages/react/SimpleList.tsx +148 -0
  342. package/examples/pages/react/SubNav.tsx +69 -20
  343. package/examples/pages/react/TableList.tsx +268 -0
  344. package/examples/pages/react/Tabs.tsx +72 -248
  345. package/examples/pages/react/Tags.tsx +52 -13
  346. package/examples/pages/react/Text.tsx +134 -0
  347. package/examples/pages/react/Tooltips.tsx +1 -1
  348. package/examples/pages/react/TreeSelect.tsx +178 -0
  349. package/examples/pages/react.html +4 -0
  350. package/images/avatar_64.png +0 -0
  351. package/package.json +11 -6
  352. package/react/components/Alert.d.ts +3 -0
  353. package/react/components/Alert.js +9 -1
  354. package/react/components/Avatar.d.ts +9 -0
  355. package/react/components/Avatar.js +19 -1
  356. package/react/components/ButtonGroup.d.ts +4 -2
  357. package/react/components/ButtonGroup.js +5 -3
  358. package/react/components/Carousel.js +1 -1
  359. package/react/components/CheckButtonGroup.d.ts +3 -1
  360. package/react/components/CheckButtonGroup.js +8 -2
  361. package/react/components/CheckGroup.d.ts +1 -0
  362. package/react/components/CheckGroup.js +1 -1
  363. package/react/components/Checkbox.d.ts +2 -1
  364. package/react/components/Checkbox.js +2 -2
  365. package/react/components/CheckboxButton.d.ts +1 -0
  366. package/react/components/CheckboxButton.js +2 -2
  367. package/react/components/ContentDivider.d.ts +12 -0
  368. package/react/components/ContentDivider.js +66 -0
  369. package/react/components/CreateButton.d.ts +17 -0
  370. package/react/components/CreateButton.js +66 -0
  371. package/react/components/DatePicker.js +7 -2
  372. package/react/components/DropZone.d.ts +25 -0
  373. package/react/components/DropZone.js +93 -0
  374. package/react/components/Dropdown.d.ts +1 -0
  375. package/react/components/Dropdown.js +28 -23
  376. package/react/components/DropdownFirst.js +1 -1
  377. package/react/components/Form/FormGroup.d.ts +13 -0
  378. package/react/components/Form/FormGroup.js +61 -0
  379. package/react/components/Form/FormItem.d.ts +9 -0
  380. package/react/components/Form/FormItem.js +54 -0
  381. package/react/components/Form/FormLabel.d.ts +10 -0
  382. package/react/components/Form/FormLabel.js +54 -0
  383. package/react/components/Form/FormRow.d.ts +17 -0
  384. package/react/components/Form/FormRow.js +62 -0
  385. package/react/components/Form/FormText.d.ts +8 -0
  386. package/react/components/Form/FormText.js +47 -0
  387. package/react/components/Form/index.d.ts +5 -0
  388. package/react/components/Form/index.js +12 -0
  389. package/react/components/Icon.d.ts +1 -0
  390. package/react/components/Icon.js +2 -1
  391. package/react/components/IconButton.d.ts +9 -2
  392. package/react/components/IconButton.js +13 -5
  393. package/react/components/IconLabel.d.ts +2 -0
  394. package/react/components/IconLabel.js +6 -3
  395. package/react/components/Input.d.ts +21 -7
  396. package/react/components/Input.js +10 -13
  397. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  398. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  399. package/react/components/Layouts/AuthoringContainer.d.ts +11 -0
  400. package/react/components/Layouts/AuthoringContainer.js +58 -0
  401. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  402. package/react/components/Layouts/AuthoringFrame.js +56 -0
  403. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  404. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  405. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  406. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  407. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  408. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  409. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  410. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  411. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  412. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  413. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  414. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  415. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  416. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  417. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  418. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  419. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  420. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  421. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  422. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +23 -22
  423. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  424. package/react/components/Layouts/AuthoringMain.js +53 -0
  425. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  426. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  427. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  428. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  429. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  430. package/react/components/Layouts/AuthoringMainToolBar.js +54 -0
  431. package/react/components/Layouts/Container.d.ts +14 -0
  432. package/react/components/Layouts/Container.js +60 -0
  433. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  434. package/react/components/Layouts/ContentSplitter.js +56 -0
  435. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  436. package/react/components/Layouts/HeaderPanel.js +47 -0
  437. package/react/components/Layouts/Layout.d.ts +8 -0
  438. package/react/components/Layouts/Layout.js +35 -0
  439. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  440. package/react/components/Layouts/LayoutContainer.js +47 -0
  441. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  442. package/react/components/Layouts/LeftPanel.js +54 -0
  443. package/react/components/Layouts/MainPanel.d.ts +11 -0
  444. package/react/components/Layouts/MainPanel.js +57 -0
  445. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  446. package/react/components/Layouts/OverlayPanel.js +49 -0
  447. package/react/components/Layouts/PageLayout.d.ts +16 -0
  448. package/react/components/Layouts/PageLayout.js +64 -0
  449. package/react/components/Layouts/Panel.d.ts +66 -0
  450. package/react/components/Layouts/Panel.js +166 -0
  451. package/react/components/Layouts/RightPanel.d.ts +9 -0
  452. package/react/components/Layouts/RightPanel.js +47 -0
  453. package/react/components/Layouts/index.d.ts +28 -0
  454. package/react/components/Layouts/index.js +63 -0
  455. package/react/components/LeftMenu.d.ts +8 -3
  456. package/react/components/LeftMenu.js +55 -16
  457. package/react/components/Lists/BoxedList.d.ts +38 -0
  458. package/react/components/Lists/BoxedList.js +139 -0
  459. package/react/components/Lists/SimpleList.d.ts +21 -0
  460. package/react/components/Lists/SimpleList.js +78 -0
  461. package/react/components/Lists/index.d.ts +2 -0
  462. package/react/components/Lists/index.js +9 -0
  463. package/react/components/Modal.d.ts +5 -1
  464. package/react/components/Modal.js +11 -2
  465. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  466. package/react/components/Navigation/QuickNavBar.js +113 -0
  467. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  468. package/react/components/Navigation/SideBarMenu.js +77 -0
  469. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  470. package/react/components/Navigation/SideBarTabs.js +86 -0
  471. package/react/components/Navigation/index.d.ts +3 -0
  472. package/react/components/Navigation/index.js +8 -0
  473. package/react/components/RadioButtonGroup.d.ts +29 -0
  474. package/react/components/RadioButtonGroup.js +89 -0
  475. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  476. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  477. package/react/components/SearchBar.d.ts +23 -0
  478. package/react/components/SearchBar.js +87 -0
  479. package/react/components/Select.d.ts +2 -1
  480. package/react/components/Select.js +3 -9
  481. package/react/components/SelectGrid.js +3 -3
  482. package/react/components/SlidingToolbar.d.ts +1 -1
  483. package/react/components/SlidingToolbar.js +11 -1
  484. package/react/components/Spinner.d.ts +0 -1
  485. package/react/components/Spinner.js +1 -2
  486. package/react/components/SubNav.d.ts +8 -1
  487. package/react/components/SubNav.js +22 -4
  488. package/react/components/Switch.d.ts +4 -1
  489. package/react/components/Switch.js +19 -7
  490. package/react/components/SwitchGroup.d.ts +1 -0
  491. package/react/components/SwitchGroup.js +1 -1
  492. package/react/components/TabCustom.d.ts +11 -22
  493. package/react/components/TabCustom.js +23 -52
  494. package/react/components/TabList.d.ts +2 -11
  495. package/react/components/TabList.js +11 -32
  496. package/react/components/Tag.d.ts +4 -4
  497. package/react/components/Tag.js +16 -5
  498. package/react/components/TagInput.d.ts +0 -1
  499. package/react/components/Text/Heading.d.ts +15 -0
  500. package/react/components/Text/Heading.js +77 -0
  501. package/react/components/Text/Text.d.ts +15 -0
  502. package/react/components/Text/Text.js +65 -0
  503. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  504. package/react/components/ThemeSelector.js +112 -0
  505. package/react/components/TimePicker.js +2 -2
  506. package/react/components/Togglebox.d.ts +1 -0
  507. package/react/components/Togglebox.js +9 -2
  508. package/react/index.d.ts +17 -4
  509. package/react/index.js +41 -6
  510. package/sd_icons.eot +0 -0
  511. package/sd_icons.svg +189 -0
  512. package/sd_icons.ttf +0 -0
  513. package/sd_icons.woff +0 -0
  514. package/app/styles/_editor-themes.scss +0 -326
  515. package/app/styles/variables/_design-tokens-general.scss +0 -76
  516. package/app-typescript/components/Radio.tsx +0 -57
  517. package/app-typescript/components/RadioButton.tsx +0 -57
  518. package/dist/react/Radios.tsx +0 -391
  519. package/examples/pages/react/Radios.tsx +0 -391
package/examples/pages/react/Avatar.tsx CHANGED
@@ -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
  }