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

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 (661) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/fonts/sd_big-icons.eot +0 -0
  3. package/app/fonts/sd_big-icons.svg +55 -53
  4. package/app/fonts/sd_big-icons.ttf +0 -0
  5. package/app/fonts/sd_big-icons.woff +0 -0
  6. package/app/fonts/sd_icons.eot +0 -0
  7. package/app/fonts/sd_icons.svg +1 -0
  8. package/app/fonts/sd_icons.ttf +0 -0
  9. package/app/fonts/sd_icons.woff +0 -0
  10. package/app/img/SD-logo.svg +52 -0
  11. package/app/img/dots.svg +3 -0
  12. package/app/img/spinner.svg +3 -0
  13. package/app/img/themes/theme-base.svg +1 -0
  14. package/app/img/themes/theme-contrast.svg +45 -0
  15. package/app/img/themes/theme-dark.svg +1 -0
  16. package/app/img/themes/theme-light.svg +1 -0
  17. package/app/index.js +1 -1
  18. package/app/scripts/modals.js +22 -9
  19. package/app/styles/_accessibility.scss +312 -4
  20. package/app/styles/_alerts.scss +57 -19
  21. package/app/styles/_avatar.scss +25 -1
  22. package/app/styles/_badge.scss +2 -2
  23. package/app/styles/_big-icon-font.scss +64 -24
  24. package/app/styles/_boxed-list.scss +67 -21
  25. package/app/styles/_buttons.scss +435 -332
  26. package/app/styles/_carousel.scss +17 -11
  27. package/app/styles/_design-tokens.scss +2 -0
  28. package/app/styles/_hamburger.scss +160 -0
  29. package/app/styles/_helpers.scss +198 -34
  30. package/app/styles/_icon-font.scss +344 -307
  31. package/app/styles/_icon-labels.scss +66 -10
  32. package/app/styles/_labels.scss +12 -6
  33. package/app/styles/_loaders.scss +13 -0
  34. package/app/styles/_master-desk.scss +5 -5
  35. package/app/styles/_mixins.scss +13 -3
  36. package/app/styles/_modals.scss +4 -28
  37. package/app/styles/_normalize.scss +1 -0
  38. package/app/styles/_panel-info.scss +19 -14
  39. package/app/styles/_sd-tag-input.scss +104 -3
  40. package/app/styles/_simple-list.scss +39 -17
  41. package/app/styles/_spinner.scss +46 -0
  42. package/app/styles/_table-list.scss +244 -0
  43. package/app/styles/_tabs.scss +6 -8
  44. package/app/styles/_tag-labels.scss +11 -2
  45. package/app/styles/_thumb-carousel.scss +11 -10
  46. package/app/styles/_toggle-box.scss +46 -12
  47. package/app/styles/_toggle-button.scss +42 -0
  48. package/app/styles/_tooltips.scss +3 -3
  49. package/app/styles/_variables.scss +0 -1
  50. package/app/styles/app.scss +13 -2
  51. package/app/styles/components/_card-item.scss +33 -21
  52. package/app/styles/components/_list-item.scss +32 -23
  53. package/app/styles/components/_sd-dropzone.scss +114 -0
  54. package/app/styles/components/_sd-grid-item.scss +2 -2
  55. package/app/styles/components/_sd-notification-panel.scss +48 -0
  56. package/app/styles/components/_sd-searchbar.scss +5 -98
  57. package/app/styles/components/_subnav.scss +149 -120
  58. package/app/styles/components/_theme-selector.scss +189 -0
  59. package/app/styles/design-tokens/_design-tokens-general.scss +81 -0
  60. package/app/styles/{variables → design-tokens}/_new-colors.scss +41 -20
  61. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  62. package/app/styles/editor/_editor-buttons.scss +54 -0
  63. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  64. package/app/styles/form-elements/_checkbox.scss +85 -58
  65. package/app/styles/form-elements/_forms-general.scss +90 -14
  66. package/app/styles/form-elements/_inputs.scss +305 -65
  67. package/app/styles/form-elements/_select-grid.scss +79 -0
  68. package/app/styles/grids/_basic-grid.scss +52 -26
  69. package/app/styles/grids/_grid-layout.scss +174 -66
  70. package/app/styles/grids/_layout-grid.scss +4 -4
  71. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  72. package/app/styles/interface-elements/_side-panel.scss +87 -58
  73. package/app/styles/layout/_basic-layout.scss +1 -4
  74. package/app/styles/layout/_container.scss +35 -0
  75. package/app/styles/layout/_editor.scss +398 -0
  76. package/app/styles/menus/_sd-bottom-tabs.scss +70 -0
  77. package/app/styles/menus/_sd-left-navigation.scss +38 -3
  78. package/app/styles/menus/_sd-sidebar-menu.scss +109 -14
  79. package/app/styles/menus/_sd-top-menu.scss +19 -5
  80. package/app/styles/pr-superdesk-theme.scss +3 -0
  81. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  82. package/app/styles/primereact/_pr-dialog.scss +39 -7
  83. package/app/styles/primereact/_pr-dropdown.scss +155 -8
  84. package/app/styles/primereact/_pr-general.scss +4 -0
  85. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  86. package/app/styles/variables/_colors.scss +2 -452
  87. package/app/styles/variables/_dimensions.scss +85 -1
  88. package/app/styles/variables/_form-elements.scss +0 -2
  89. package/app-typescript/components/Alert.tsx +16 -1
  90. package/app-typescript/components/Avatar.tsx +21 -0
  91. package/app-typescript/components/Button.tsx +7 -1
  92. package/app-typescript/components/ButtonGroup.tsx +5 -4
  93. package/app-typescript/components/Carousel.tsx +1 -1
  94. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  95. package/app-typescript/components/CheckGroup.tsx +2 -1
  96. package/app-typescript/components/Checkbox.tsx +7 -3
  97. package/app-typescript/components/CheckboxButton.tsx +9 -2
  98. package/app-typescript/components/CreateButton.tsx +38 -0
  99. package/app-typescript/components/DatePicker.tsx +73 -22
  100. package/app-typescript/components/DonutChart.tsx +1 -1
  101. package/app-typescript/components/DropZone.tsx +89 -0
  102. package/app-typescript/components/Dropdown.tsx +9 -1
  103. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  104. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  105. package/app-typescript/components/Form/FormItem.tsx +20 -0
  106. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  107. package/app-typescript/components/Form/FormRow.tsx +40 -0
  108. package/app-typescript/components/Form/FormText.tsx +15 -0
  109. package/app-typescript/components/Form/index.tsx +5 -0
  110. package/app-typescript/components/Icon.tsx +4 -2
  111. package/app-typescript/components/IconButton.tsx +30 -12
  112. package/app-typescript/components/IconLabel.tsx +8 -1
  113. package/app-typescript/components/IconPicker.tsx +277 -0
  114. package/app-typescript/components/Input.tsx +58 -9
  115. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  116. package/app-typescript/components/Layouts/AuthoringContainer.tsx +27 -0
  117. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  118. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  119. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  120. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  121. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  122. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  123. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  124. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  125. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  126. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  127. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  128. package/app-typescript/components/Layouts/AuthoringMain.tsx +50 -0
  129. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  131. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  132. package/app-typescript/components/Layouts/BottomBarAction.tsx +35 -0
  133. package/app-typescript/components/Layouts/Container.tsx +30 -0
  134. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  135. package/app-typescript/components/Layouts/CoreLayout.tsx +62 -0
  136. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +16 -0
  137. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +15 -0
  138. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +16 -0
  139. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +15 -0
  140. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +24 -0
  141. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +35 -0
  142. package/app-typescript/components/Layouts/HamburgerButton.tsx +41 -0
  143. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  144. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  145. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  146. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  147. package/app-typescript/components/Layouts/MainMenu.tsx +101 -0
  148. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  149. package/app-typescript/components/Layouts/NotificationPanel.tsx +109 -0
  150. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  151. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  152. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  153. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  154. package/app-typescript/components/Layouts/index.tsx +43 -0
  155. package/app-typescript/components/LeftMenu.tsx +129 -49
  156. package/app-typescript/components/ListItemLoader.tsx +30 -0
  157. package/app-typescript/components/Lists/BoxedList.tsx +169 -0
  158. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  159. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  160. package/app-typescript/components/Lists/TableList.tsx +208 -0
  161. package/app-typescript/components/Lists/index.tsx +2 -0
  162. package/app-typescript/components/Menu.tsx +31 -7
  163. package/app-typescript/components/Modal.tsx +31 -18
  164. package/app-typescript/components/MultiSelect.tsx +112 -0
  165. package/app-typescript/components/NavButton.tsx +4 -0
  166. package/app-typescript/components/Navigation/BottomNav.tsx +82 -0
  167. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  168. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  169. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  170. package/app-typescript/components/Navigation/index.tsx +3 -0
  171. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  172. package/app-typescript/components/RadioGroup.tsx +69 -0
  173. package/app-typescript/components/SearchBar.tsx +79 -0
  174. package/app-typescript/components/Select.tsx +22 -4
  175. package/app-typescript/components/SelectGrid.tsx +233 -0
  176. package/app-typescript/components/SidebarMenu.tsx +68 -0
  177. package/app-typescript/components/Skeleton.tsx +48 -0
  178. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  179. package/app-typescript/components/Spinner.tsx +32 -0
  180. package/app-typescript/components/SubNav.tsx +25 -4
  181. package/app-typescript/components/Switch.tsx +34 -12
  182. package/app-typescript/components/SwitchGroup.tsx +2 -1
  183. package/app-typescript/components/Tag.tsx +31 -7
  184. package/app-typescript/components/Text/Heading.tsx +67 -0
  185. package/app-typescript/components/Text/Text.tsx +36 -0
  186. package/app-typescript/components/Text/Time.tsx +34 -0
  187. package/app-typescript/components/ThemeSelector.tsx +113 -0
  188. package/app-typescript/components/Togglebox.tsx +9 -7
  189. package/app-typescript/components/Tooltip.tsx +7 -5
  190. package/app-typescript/components/TreeSelect.tsx +330 -0
  191. package/app-typescript/components/WithSizeObserver.tsx +88 -0
  192. package/app-typescript/dist/components/Alert.d.ts +16 -0
  193. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  194. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  195. package/app-typescript/dist/components/Badge.d.ts +13 -0
  196. package/app-typescript/dist/components/Button.d.ts +23 -0
  197. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  198. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  199. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  200. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  201. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  202. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  203. package/app-typescript/dist/components/Divider.d.ts +9 -0
  204. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  205. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  206. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  207. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  208. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  209. package/app-typescript/dist/components/Genie.d.ts +13 -0
  210. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  211. package/app-typescript/dist/components/GridList.d.ts +14 -0
  212. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  213. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  214. package/app-typescript/dist/components/Icon.d.ts +12 -0
  215. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  216. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  217. package/app-typescript/dist/components/Input.d.ts +24 -0
  218. package/app-typescript/dist/components/Label.d.ts +15 -0
  219. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  220. package/app-typescript/dist/components/Loader.d.ts +8 -0
  221. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  222. package/app-typescript/dist/components/Popover.d.ts +13 -0
  223. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  224. package/{react → app-typescript/dist}/components/Radio.d.ts +7 -8
  225. package/{react → app-typescript/dist}/components/RadioButton.d.ts +0 -0
  226. package/app-typescript/dist/components/Select.d.ts +29 -0
  227. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  228. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  229. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  230. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  231. package/app-typescript/dist/components/Switch.d.ts +12 -0
  232. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  233. package/app-typescript/dist/components/TabList.d.ts +22 -0
  234. package/app-typescript/dist/components/Tag.d.ts +9 -0
  235. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  236. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  237. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  238. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  239. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  240. package/app-typescript/dist/index.d.ts +56 -0
  241. package/app-typescript/helpers.tsx +3 -0
  242. package/app-typescript/index.ts +25 -3
  243. package/dist/SD-logo.svg +52 -0
  244. package/dist/avatar-2.jpg +0 -0
  245. package/dist/avatar-3.jpg +0 -0
  246. package/dist/avatar-4.jpg +0 -0
  247. package/dist/avatar-5.jpg +0 -0
  248. package/dist/avatar-6.jpg +0 -0
  249. package/dist/components/basic-grid.html +1 -1
  250. package/dist/components/checkbox.html +1 -1
  251. package/dist/components/modals.html +1 -0
  252. package/dist/dots.svg +3 -0
  253. package/dist/examples.bundle.css +8628 -1602
  254. package/dist/examples.bundle.js +73031 -48307
  255. package/dist/playgrounds/accessible-theme-test.html +1 -1
  256. package/dist/playgrounds/boxed-list.html +1 -1
  257. package/dist/playgrounds/cards.html +9 -4
  258. package/dist/playgrounds/editor-3-test.html +15 -0
  259. package/dist/playgrounds/form-layout.html +9 -7
  260. package/dist/playgrounds/layout-test-2.html +1 -1
  261. package/dist/playgrounds/list-item-test.html +1 -1
  262. package/dist/playgrounds/master-desk.html +2 -4
  263. package/dist/playgrounds/media-carousel.html +1 -1
  264. package/dist/playgrounds/photo-desk.html +1 -1
  265. package/dist/playgrounds/planning.html +1 -1
  266. package/dist/playgrounds/publish.html +1 -1
  267. package/dist/playgrounds/publisher-content-analytics.html +1 -1
  268. package/dist/playgrounds/publisher-content-list-automatic.html +1 -1
  269. package/dist/playgrounds/publisher-content-list-manual.html +1 -1
  270. package/dist/playgrounds/publisher-content-lists.html +1 -1
  271. package/dist/playgrounds/publisher-dashboard.html +1 -1
  272. package/dist/playgrounds/publisher-output-control.html +1 -1
  273. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +145 -0
  274. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  275. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  276. package/dist/playgrounds/react-playgrounds/Index.tsx +7 -1
  277. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  278. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  279. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  280. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  281. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  282. package/dist/playgrounds/react-playgrounds/TestGround.tsx +276 -23
  283. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  284. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  285. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  286. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  287. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  288. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  289. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  290. package/dist/playgrounds/swimlane-view.html +1 -1
  291. package/dist/playgrounds/toasts.html +1 -1
  292. package/dist/playgrounds/video-editor.html +1 -1
  293. package/dist/react/Alerts.tsx +91 -18
  294. package/dist/react/Avatar.tsx +314 -127
  295. package/dist/react/BoxedList.tsx +362 -0
  296. package/dist/react/ButtonGroups.tsx +66 -65
  297. package/dist/react/Buttons.tsx +65 -113
  298. package/dist/react/Carousel.tsx +2 -3
  299. package/dist/react/Checkboxs.tsx +66 -25
  300. package/dist/react/Container.tsx +143 -0
  301. package/dist/react/ContentList.tsx +280 -0
  302. package/dist/react/CreateButton.tsx +71 -0
  303. package/dist/react/DatePicker.tsx +10 -5
  304. package/dist/react/DropZone.tsx +111 -0
  305. package/dist/react/Heading.tsx +106 -0
  306. package/dist/react/IconButtons.tsx +51 -21
  307. package/dist/react/IconFont.tsx +7 -6
  308. package/dist/react/IconLabels.tsx +24 -2
  309. package/dist/react/IconPicker.tsx +65 -0
  310. package/dist/react/Index.tsx +120 -19
  311. package/dist/react/Inputs.tsx +142 -4
  312. package/dist/react/LeftNavigations.tsx +161 -9
  313. package/dist/react/ListItems.tsx +34 -0
  314. package/dist/react/Modal.tsx +8 -7
  315. package/dist/react/MultiSelect.tsx +198 -0
  316. package/dist/react/NavButtons.tsx +4 -4
  317. package/dist/react/Panel.tsx +366 -0
  318. package/dist/react/QuickNavigationBar.tsx +142 -0
  319. package/dist/react/RadioGroup.tsx +351 -0
  320. package/dist/react/SelectGrid.tsx +121 -0
  321. package/dist/react/Selects.tsx +57 -0
  322. package/dist/react/SimpleList.tsx +148 -0
  323. package/dist/react/SubNav.tsx +65 -18
  324. package/dist/react/TableList.tsx +268 -0
  325. package/dist/react/Tags.tsx +57 -5
  326. package/dist/react/Text.tsx +134 -0
  327. package/dist/react/TreeSelect.tsx +178 -0
  328. package/dist/react/WithSizeObserver.tsx +44 -0
  329. package/dist/react.html +4 -0
  330. package/dist/sd_big-icons.eot +0 -0
  331. package/dist/sd_big-icons.svg +55 -53
  332. package/dist/sd_big-icons.ttf +0 -0
  333. package/dist/sd_big-icons.woff +0 -0
  334. package/dist/sd_icons.eot +0 -0
  335. package/dist/sd_icons.svg +1 -0
  336. package/dist/sd_icons.ttf +0 -0
  337. package/dist/sd_icons.woff +0 -0
  338. package/dist/superdesk-ui.bundle.css +54140 -25145
  339. package/dist/superdesk-ui.bundle.js +58228 -51200
  340. package/dist/vendor.bundle.js +25688 -25666
  341. package/examples/css/docs-page.css +99 -29
  342. package/examples/img/avatar-2.jpg +0 -0
  343. package/examples/img/avatar-3.jpg +0 -0
  344. package/examples/img/avatar-4.jpg +0 -0
  345. package/examples/img/avatar-5.jpg +0 -0
  346. package/examples/img/avatar-6.jpg +0 -0
  347. package/examples/index.js +28 -0
  348. package/examples/pages/components/basic-grid.html +1 -1
  349. package/examples/pages/components/checkbox.html +1 -1
  350. package/examples/pages/components/modals.html +1 -0
  351. package/examples/pages/playgrounds/accessible-theme-test.html +1 -1
  352. package/examples/pages/playgrounds/boxed-list.html +1 -1
  353. package/examples/pages/playgrounds/cards.html +9 -4
  354. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  355. package/examples/pages/playgrounds/form-layout.html +9 -7
  356. package/examples/pages/playgrounds/layout-test-2.html +1 -1
  357. package/examples/pages/playgrounds/list-item-test.html +1 -1
  358. package/examples/pages/playgrounds/master-desk.html +2 -4
  359. package/examples/pages/playgrounds/media-carousel.html +1 -1
  360. package/examples/pages/playgrounds/photo-desk.html +1 -1
  361. package/examples/pages/playgrounds/planning.html +1 -1
  362. package/examples/pages/playgrounds/publish.html +1 -1
  363. package/examples/pages/playgrounds/publisher-content-analytics.html +1 -1
  364. package/examples/pages/playgrounds/publisher-content-list-automatic.html +1 -1
  365. package/examples/pages/playgrounds/publisher-content-list-manual.html +1 -1
  366. package/examples/pages/playgrounds/publisher-content-lists.html +1 -1
  367. package/examples/pages/playgrounds/publisher-dashboard.html +1 -1
  368. package/examples/pages/playgrounds/publisher-output-control.html +1 -1
  369. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +145 -0
  370. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  371. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  372. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +7 -1
  373. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  374. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  375. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  376. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  377. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  378. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +276 -23
  379. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +12 -79
  380. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  381. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  382. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  383. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  384. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  385. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  386. package/examples/pages/playgrounds/swimlane-view.html +1 -1
  387. package/examples/pages/playgrounds/toasts.html +1 -1
  388. package/examples/pages/playgrounds/video-editor.html +1 -1
  389. package/examples/pages/react/Alerts.tsx +91 -18
  390. package/examples/pages/react/Avatar.tsx +314 -127
  391. package/examples/pages/react/BoxedList.tsx +362 -0
  392. package/examples/pages/react/ButtonGroups.tsx +66 -65
  393. package/examples/pages/react/Buttons.tsx +65 -113
  394. package/examples/pages/react/Carousel.tsx +2 -3
  395. package/examples/pages/react/Checkboxs.tsx +66 -25
  396. package/examples/pages/react/Container.tsx +143 -0
  397. package/examples/pages/react/ContentList.tsx +280 -0
  398. package/examples/pages/react/CreateButton.tsx +71 -0
  399. package/examples/pages/react/DatePicker.tsx +10 -5
  400. package/examples/pages/react/DropZone.tsx +111 -0
  401. package/examples/pages/react/Heading.tsx +106 -0
  402. package/examples/pages/react/IconButtons.tsx +51 -21
  403. package/examples/pages/react/IconFont.tsx +7 -6
  404. package/examples/pages/react/IconLabels.tsx +24 -2
  405. package/examples/pages/react/IconPicker.tsx +65 -0
  406. package/examples/pages/react/Index.tsx +120 -19
  407. package/examples/pages/react/Inputs.tsx +142 -4
  408. package/examples/pages/react/LeftNavigations.tsx +161 -9
  409. package/examples/pages/react/ListItems.tsx +34 -0
  410. package/examples/pages/react/Modal.tsx +8 -7
  411. package/examples/pages/react/MultiSelect.tsx +198 -0
  412. package/examples/pages/react/NavButtons.tsx +4 -4
  413. package/examples/pages/react/Panel.tsx +366 -0
  414. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  415. package/examples/pages/react/RadioGroup.tsx +351 -0
  416. package/examples/pages/react/SelectGrid.tsx +121 -0
  417. package/examples/pages/react/Selects.tsx +57 -0
  418. package/examples/pages/react/SimpleList.tsx +148 -0
  419. package/examples/pages/react/SubNav.tsx +65 -18
  420. package/examples/pages/react/TableList.tsx +268 -0
  421. package/examples/pages/react/Tags.tsx +57 -5
  422. package/examples/pages/react/Text.tsx +134 -0
  423. package/examples/pages/react/TreeSelect.tsx +178 -0
  424. package/examples/pages/react/WithSizeObserver.tsx +44 -0
  425. package/examples/pages/react.html +4 -0
  426. package/package.json +12 -7
  427. package/patches/@superdesk+primereact+5.0.2-4.patch +44 -0
  428. package/react/components/Alert.d.ts +3 -0
  429. package/react/components/Alert.js +17 -7
  430. package/react/components/Autocomplete.js +16 -12
  431. package/react/components/Avatar.d.ts +9 -0
  432. package/react/components/Avatar.js +24 -4
  433. package/react/components/Badge.js +7 -5
  434. package/react/components/Button.d.ts +2 -0
  435. package/react/components/Button.js +12 -8
  436. package/react/components/ButtonGroup.d.ts +3 -2
  437. package/react/components/ButtonGroup.js +9 -7
  438. package/react/components/Carousel.js +5 -3
  439. package/react/components/CheckButtonGroup.d.ts +3 -1
  440. package/react/components/CheckButtonGroup.js +14 -6
  441. package/react/components/CheckGroup.d.ts +1 -0
  442. package/react/components/CheckGroup.js +6 -4
  443. package/react/components/Checkbox.d.ts +2 -1
  444. package/react/components/Checkbox.js +7 -5
  445. package/react/components/CheckboxButton.d.ts +1 -0
  446. package/react/components/CheckboxButton.js +8 -6
  447. package/react/components/ContentDivider.js +8 -6
  448. package/react/components/CreateButton.d.ts +17 -0
  449. package/react/components/CreateButton.js +68 -0
  450. package/react/components/DatePicker.d.ts +10 -0
  451. package/react/components/DatePicker.js +61 -31
  452. package/react/components/Divider.js +6 -4
  453. package/react/components/DonutChart.d.ts +1 -1
  454. package/react/components/DonutChart.js +24 -6
  455. package/react/components/DropZone.d.ts +25 -0
  456. package/react/components/DropZone.js +95 -0
  457. package/react/components/Dropdown.d.ts +1 -0
  458. package/react/components/Dropdown.js +10 -9
  459. package/react/components/DropdownFirst.js +18 -11
  460. package/react/components/EmptyState.js +7 -5
  461. package/react/components/Form/FormGroup.d.ts +13 -0
  462. package/react/components/Form/FormGroup.js +63 -0
  463. package/react/components/Form/FormItem.d.ts +9 -0
  464. package/react/components/Form/FormItem.js +56 -0
  465. package/react/components/Form/FormLabel.d.ts +10 -0
  466. package/react/components/Form/FormLabel.js +56 -0
  467. package/react/components/Form/FormRow.d.ts +17 -0
  468. package/react/components/Form/FormRow.js +64 -0
  469. package/react/components/Form/FormText.d.ts +8 -0
  470. package/react/components/Form/FormText.js +49 -0
  471. package/react/components/Form/index.d.ts +5 -0
  472. package/react/components/Form/index.js +13 -0
  473. package/react/components/FormLabel.js +5 -3
  474. package/react/components/GridItem.js +9 -7
  475. package/react/components/GridList.js +8 -6
  476. package/react/components/HeadingText.js +4 -2
  477. package/react/components/HelloWorld.js +4 -2
  478. package/react/components/Icon.d.ts +2 -1
  479. package/react/components/Icon.js +9 -6
  480. package/react/components/IconButton.d.ts +9 -2
  481. package/react/components/IconButton.js +17 -7
  482. package/react/components/IconLabel.d.ts +2 -0
  483. package/react/components/IconLabel.js +12 -7
  484. package/react/components/IconPicker.d.ts +24 -0
  485. package/react/components/IconPicker.js +287 -0
  486. package/react/components/Input.d.ts +25 -3
  487. package/react/components/Input.js +36 -12
  488. package/react/components/Label.js +10 -8
  489. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  490. package/react/components/Layouts/AuthorinInnerSideBar.js +49 -0
  491. package/react/components/Layouts/AuthoringContainer.d.ts +11 -0
  492. package/react/components/Layouts/AuthoringContainer.js +60 -0
  493. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  494. package/react/components/Layouts/AuthoringFrame.js +58 -0
  495. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  496. package/react/components/Layouts/AuthoringFrameContainer.js +49 -0
  497. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  498. package/react/components/Layouts/AuthoringFrameLeftBar.js +49 -0
  499. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  500. package/react/components/Layouts/AuthoringFrameMain.js +49 -0
  501. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  502. package/react/components/Layouts/AuthoringFrameNavBar.js +49 -0
  503. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  504. package/react/components/Layouts/AuthoringFrameOverlay.js +49 -0
  505. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  506. package/react/components/Layouts/AuthoringFrameRightBar.js +49 -0
  507. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  508. package/react/components/Layouts/AuthoringFrameSidePanel.js +58 -0
  509. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  510. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +58 -0
  511. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  512. package/react/components/Layouts/AuthoringInnerBody.js +49 -0
  513. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  514. package/react/components/Layouts/AuthoringInnerHeader.js +68 -0
  515. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  516. package/react/components/Layouts/AuthoringMain.js +55 -0
  517. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  518. package/react/components/Layouts/AuthoringMainContainer.js +49 -0
  519. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  520. package/react/components/Layouts/AuthoringMainContent.js +49 -0
  521. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  522. package/react/components/Layouts/AuthoringMainToolBar.js +56 -0
  523. package/react/components/Layouts/BottomBarAction.d.ts +12 -0
  524. package/react/components/Layouts/BottomBarAction.js +59 -0
  525. package/react/components/Layouts/Container.d.ts +14 -0
  526. package/react/components/Layouts/Container.js +62 -0
  527. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  528. package/react/components/Layouts/ContentSplitter.js +58 -0
  529. package/react/components/Layouts/CoreLayout.d.ts +19 -0
  530. package/react/components/Layouts/CoreLayout.js +55 -0
  531. package/react/components/Layouts/CoreLayoutContainer.d.ts +9 -0
  532. package/react/components/Layouts/CoreLayoutContainer.js +49 -0
  533. package/react/components/Layouts/CoreLayoutFooter.d.ts +8 -0
  534. package/react/components/Layouts/CoreLayoutFooter.js +49 -0
  535. package/react/components/Layouts/CoreLayoutMain.d.ts +9 -0
  536. package/react/components/Layouts/CoreLayoutMain.js +49 -0
  537. package/react/components/Layouts/CoreLayoutOverlay.d.ts +8 -0
  538. package/react/components/Layouts/CoreLayoutOverlay.js +49 -0
  539. package/react/components/Layouts/CoreLayoutSlideInMenu.d.ts +11 -0
  540. package/react/components/Layouts/CoreLayoutSlideInMenu.js +58 -0
  541. package/react/components/Layouts/CoreLayoutTopMenu.d.ts +14 -0
  542. package/react/components/Layouts/CoreLayoutTopMenu.js +54 -0
  543. package/react/components/Layouts/HamburgerButton.d.ts +14 -0
  544. package/react/components/Layouts/HamburgerButton.js +63 -0
  545. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  546. package/react/components/Layouts/HeaderPanel.js +49 -0
  547. package/react/components/Layouts/Layout.d.ts +8 -0
  548. package/react/components/Layouts/Layout.js +36 -0
  549. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  550. package/react/components/Layouts/LayoutContainer.js +49 -0
  551. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  552. package/react/components/Layouts/LeftPanel.js +56 -0
  553. package/react/components/Layouts/MainMenu.d.ts +41 -0
  554. package/react/components/Layouts/MainMenu.js +103 -0
  555. package/react/components/Layouts/MainPanel.d.ts +11 -0
  556. package/react/components/Layouts/MainPanel.js +59 -0
  557. package/react/components/Layouts/NotificationPanel.d.ts +45 -0
  558. package/react/components/Layouts/NotificationPanel.js +110 -0
  559. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  560. package/react/components/Layouts/OverlayPanel.js +51 -0
  561. package/react/components/Layouts/PageLayout.d.ts +16 -0
  562. package/react/components/Layouts/PageLayout.js +66 -0
  563. package/react/components/Layouts/Panel.d.ts +66 -0
  564. package/react/components/Layouts/Panel.js +168 -0
  565. package/react/components/Layouts/RightPanel.d.ts +9 -0
  566. package/react/components/Layouts/RightPanel.js +49 -0
  567. package/react/components/Layouts/index.d.ts +39 -0
  568. package/react/components/Layouts/index.js +86 -0
  569. package/react/components/LeftMenu.d.ts +10 -3
  570. package/react/components/LeftMenu.js +64 -18
  571. package/react/components/ListItemLoader.d.ts +4 -0
  572. package/react/components/ListItemLoader.js +64 -0
  573. package/react/components/Lists/BoxedList.d.ts +44 -0
  574. package/react/components/Lists/BoxedList.js +160 -0
  575. package/react/components/Lists/SimpleList.d.ts +21 -0
  576. package/react/components/Lists/SimpleList.js +80 -0
  577. package/react/components/Lists/index.d.ts +2 -0
  578. package/react/components/Lists/index.js +10 -0
  579. package/react/components/Loader.js +4 -2
  580. package/react/components/Menu.d.ts +2 -1
  581. package/react/components/Menu.js +48 -12
  582. package/react/components/Modal.d.ts +4 -1
  583. package/react/components/Modal.js +35 -6
  584. package/react/components/NavButton.d.ts +1 -0
  585. package/react/components/NavButton.js +9 -4
  586. package/react/components/Navigation/BottomNav.d.ts +23 -0
  587. package/react/components/Navigation/BottomNav.js +88 -0
  588. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  589. package/react/components/Navigation/QuickNavBar.js +117 -0
  590. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  591. package/react/components/Navigation/SideBarMenu.js +79 -0
  592. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  593. package/react/components/Navigation/SideBarTabs.js +88 -0
  594. package/react/components/Navigation/index.d.ts +3 -0
  595. package/react/components/Navigation/index.js +9 -0
  596. package/react/components/Popover.js +4 -2
  597. package/react/components/PropsList.js +4 -2
  598. package/react/components/RadioButtonGroup.d.ts +29 -0
  599. package/react/components/RadioButtonGroup.js +91 -0
  600. package/react/components/RadioGroup.d.ts +24 -0
  601. package/react/components/{Radio.js → RadioGroup.js} +20 -14
  602. package/react/components/SearchBar.d.ts +23 -0
  603. package/react/components/SearchBar.js +89 -0
  604. package/react/components/Select.d.ts +8 -1
  605. package/react/components/Select.js +22 -11
  606. package/react/components/SelectGrid.d.ts +45 -0
  607. package/react/components/SelectGrid.js +200 -0
  608. package/react/components/SelectWithTemplate.js +4 -2
  609. package/react/components/Skeleton.d.ts +30 -0
  610. package/react/components/Skeleton.js +76 -0
  611. package/react/components/SlidingToolbar.d.ts +1 -1
  612. package/react/components/SlidingToolbar.js +15 -3
  613. package/react/components/Spinner.d.ts +11 -0
  614. package/react/components/Spinner.js +71 -0
  615. package/react/components/StrechBar.js +4 -2
  616. package/react/components/SubNav.d.ts +8 -1
  617. package/react/components/SubNav.js +28 -8
  618. package/react/components/Switch.d.ts +4 -1
  619. package/react/components/Switch.js +25 -11
  620. package/react/components/SwitchGroup.d.ts +1 -0
  621. package/react/components/SwitchGroup.js +6 -4
  622. package/react/components/TabCustom.d.ts +0 -1
  623. package/react/components/TabCustom.js +11 -7
  624. package/react/components/TabList.js +6 -4
  625. package/react/components/Tag.d.ts +3 -2
  626. package/react/components/Tag.js +21 -9
  627. package/react/components/TagInput.d.ts +0 -1
  628. package/react/components/TagInput.js +7 -6
  629. package/react/components/TagInputTest.js +13 -9
  630. package/react/components/Text/Heading.d.ts +15 -0
  631. package/react/components/Text/Heading.js +79 -0
  632. package/react/components/Text/Text.d.ts +15 -0
  633. package/react/components/Text/Text.js +67 -0
  634. package/react/components/Text/Time.d.ts +15 -0
  635. package/react/components/Text/Time.js +65 -0
  636. package/react/components/ThemeSelector.d.ts +21 -0
  637. package/react/components/ThemeSelector.js +114 -0
  638. package/react/components/TimePicker.js +4 -2
  639. package/react/components/Toast.js +1 -1
  640. package/react/components/ToastMessage.js +6 -5
  641. package/react/components/ToastText.js +1 -1
  642. package/react/components/ToastWrapper.d.ts +2 -2
  643. package/react/components/ToastWrapper.js +14 -10
  644. package/react/components/Togglebox.d.ts +2 -1
  645. package/react/components/Togglebox.js +42 -14
  646. package/react/components/Tooltip.d.ts +1 -0
  647. package/react/components/Tooltip.js +14 -10
  648. package/react/components/WithSizeObserver.d.ts +25 -0
  649. package/react/components/WithSizeObserver.js +95 -0
  650. package/react/components/_Positioner.js +4 -2
  651. package/react/helpers.d.ts +1 -0
  652. package/react/helpers.js +7 -0
  653. package/react/index.d.ts +22 -3
  654. package/react/index.js +53 -4
  655. package/yarn-error.log +111 -0
  656. package/app/styles/variables/_design-tokens-general.scss +0 -136
  657. package/app-typescript/components/Radio.tsx +0 -57
  658. package/app-typescript/components/RadioButton.tsx +0 -57
  659. package/dist/react/Radios.tsx +0 -391
  660. package/examples/pages/react/Radios.tsx +0 -391
  661. package/react/components/RadioButton.js +0 -65
@@ -0,0 +1,362 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container } from '../../../app-typescript';
4
+
5
+ export default class BoxedListDoc extends React.Component {
6
+ render() {
7
+ return (
8
+ <section className='docs-page__container'>
9
+ <h2 className='docs-page__h2'>BoxedList</h2>
10
+
11
+ <Markup.ReactMarkupCodePreview>{`
12
+ <BoxedList>
13
+ <BoxedListItem>...</BoxedListItem>
14
+ </BoxedList>
15
+ `}
16
+ </Markup.ReactMarkupCodePreview>
17
+
18
+ <p className="docs-page__paragraph">...</p>
19
+
20
+ <Markup.ReactMarkup>
21
+ <Markup.ReactMarkupPreview>
22
+ <p className="docs-page__paragraph">// basic</p>
23
+
24
+ <BoxedList>
25
+ <BoxedListItem>None, nulla vitae elit libero, a pharetra augue.</BoxedListItem>
26
+ <BoxedListItem type='default'>Default. Nulla vitae elit libero, a pharetra augue.</BoxedListItem>
27
+ <BoxedListItem type='success'>Succes, donec sed odio dui.</BoxedListItem>
28
+ <BoxedListItem type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
29
+ <BoxedListItem type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
30
+ <BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
31
+ </BoxedList>
32
+
33
+ <p className="docs-page__paragraph">// clickable, with media and actions</p>
34
+
35
+ <BoxedList>
36
+ <BoxedListItem
37
+ type="success"
38
+ clickable={true}
39
+ media={(
40
+ <Icon name='slideshow' />
41
+ )}
42
+ actions={(
43
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
44
+ )}
45
+ >
46
+ <BoxedListContentRow>
47
+ Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula
48
+ porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Curabitur
49
+ blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes,
50
+ nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
51
+ </BoxedListContentRow>
52
+ </BoxedListItem>
53
+ <BoxedListItem
54
+ type="primary"
55
+ clickable={true}
56
+ media={(
57
+ <AvatarWrapper size="medium">
58
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
59
+ </AvatarWrapper>
60
+ )}
61
+ actions={(
62
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
63
+ )}
64
+ >
65
+ <BoxedListContentRow>
66
+ Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque
67
+ nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Nulla
68
+ vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
69
+ </BoxedListContentRow>
70
+ </BoxedListItem>
71
+ <BoxedListItem
72
+ type="alert"
73
+ selected={true}
74
+ media={(
75
+ <AvatarWrapper size="medium">
76
+ <AvatarContentText text="WS" tooltipText="Walter Sobchak" />
77
+ </AvatarWrapper>
78
+ )}
79
+ actions={(
80
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
81
+ )}
82
+ >
83
+ <BoxedListContentRow>
84
+ Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
85
+ Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Nullam
86
+ id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Duis mollis,
87
+ est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
88
+ </BoxedListContentRow>
89
+ </BoxedListItem>
90
+ </BoxedList>
91
+
92
+ <p className="docs-page__paragraph">// with footer + different layout options.</p>
93
+
94
+ <BoxedList>
95
+ <BoxedListItem
96
+ type="warning"
97
+ clickable={true}
98
+ media={(
99
+ <Icon name='calendar-list' />
100
+ )}
101
+ actions={(
102
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
103
+ )}
104
+ >
105
+ <BoxedListContentRow>
106
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis
107
+ dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna
108
+ mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem
109
+ lacinia quam venenatis vestibulum.
110
+ </BoxedListContentRow>
111
+ </BoxedListItem>
112
+ <BoxedListItem
113
+ type="primary"
114
+ clickable={true}
115
+ media={(
116
+ <AvatarWrapper size="medium">
117
+ <AvatarContentText text="JC" tooltipText="Joel Coen" />
118
+ </AvatarWrapper>
119
+ )}
120
+ footer={(
121
+ <ButtonGroup align='end'>
122
+ <Button size='small' style='hollow' text='Decline' onClick={()=> false} />
123
+ <Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
124
+ </ButtonGroup>
125
+ )}
126
+ >
127
+ <Heading className='sd-margin-b--1' type='h5'>Amet Mollis Porta</Heading>
128
+ <BoxedListContentRow>
129
+ Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
130
+ Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
131
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
132
+ Cras mattis consectetur purus sit amet fermentum.
133
+ </BoxedListContentRow>
134
+ </BoxedListItem>
135
+ <BoxedListItem
136
+ type="success"
137
+ clickable={true}
138
+ media={(
139
+ <AvatarWrapper size="medium">
140
+ <AvatarContentText text="EC" tooltipText="Ethan Coen" />
141
+ </AvatarWrapper>
142
+ )}
143
+ actions={(
144
+ <React.Fragment>
145
+ <IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
146
+ <IconButton icon="trash" ariaValue="Delete" onClick={()=> false} />
147
+ </React.Fragment>
148
+ )}
149
+ >
150
+ <BoxedListContentRow>
151
+ Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
152
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
153
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
154
+ </BoxedListContentRow>
155
+ <BoxedListContentRow>
156
+ <Label type='success' text='In progress' style='translucent' />
157
+ </BoxedListContentRow>
158
+ </BoxedListItem>
159
+ <BoxedListItem
160
+ type="warning"
161
+ clickable={true}
162
+ media={(
163
+ <AvatarWrapper size="medium">
164
+ <AvatarContentText text="BL" tooltipText="Bunny Lebowski" />
165
+ </AvatarWrapper>
166
+ )}
167
+ actions={(
168
+ <IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
169
+ )}
170
+ footer={(
171
+ <ButtonGroup align='end'>
172
+ <Button size='small' style='hollow' text='Decline' onClick={()=> false} />
173
+ <Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
174
+ </ButtonGroup>
175
+ )}
176
+ >
177
+ <BoxedListContentRow>
178
+ <Heading className='sd-margin-e--auto' align='start' type='h4'>Dolor Bibenduma</Heading>
179
+ <Text align='end' color='light'>23.12.2021</Text>
180
+ </BoxedListContentRow>
181
+ <BoxedListContentRow>
182
+ <Text>
183
+ Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
184
+ venenatis vestibulum. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.
185
+ </Text>
186
+ </BoxedListContentRow>
187
+ </BoxedListItem>
188
+ </BoxedList>
189
+
190
+ </Markup.ReactMarkupPreview>
191
+ <Markup.ReactMarkupCode>{`
192
+ // basic
193
+
194
+ <BoxedList>
195
+ <BoxedListItem>None, nulla vitae elit libero, a pharetra augue.</BoxedListItem>
196
+ <BoxedListItem type='default'>Default. Nulla vitae elit libero, a pharetra augue.</BoxedListItem>
197
+ <BoxedListItem type='success'>Succes, donec sed odio dui.</BoxedListItem>
198
+ <BoxedListItem type='warning'>Warning, maecenas sed diam eget risus varius.</BoxedListItem>
199
+ <BoxedListItem type='alert'>Alert. Nullam quis risus eget urna mollis ornare vel eu leo.</BoxedListItem>
200
+ <BoxedListItem type='highlight'>Highlight type, cras mattis consectetur purus sit amet fermentum.</BoxedListItem>
201
+ </BoxedList>
202
+
203
+ // clickable, with media and actions
204
+
205
+ <BoxedList>
206
+ <BoxedListItem
207
+ type="success"
208
+ clickable={true}
209
+ media={(
210
+ <Icon name='slideshow' />
211
+ )}
212
+ actions={(
213
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
214
+ )}
215
+ >
216
+ <BoxedListContentRow>
217
+ Maecenas sed diam eget risus varius blandit sit amet...
218
+ </BoxedListContentRow>
219
+ </BoxedListItem>
220
+ <BoxedListItem
221
+ type="primary"
222
+ clickable={true}
223
+ media={(
224
+ <AvatarWrapper size="medium">
225
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
226
+ </AvatarWrapper>
227
+ )}
228
+ actions={(
229
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
230
+ )}
231
+ >
232
+ <BoxedListContentRow>
233
+ Cras mattis consectetur purus sit amet fermentum...
234
+ </BoxedListContentRow>
235
+ </BoxedListItem>
236
+ <BoxedListItem
237
+ type="alert"
238
+ selected={true}
239
+ media={(
240
+ <AvatarWrapper size="medium">
241
+ <AvatarContentText text="WS" tooltipText="Walter Sobchak" />
242
+ </AvatarWrapper>
243
+ )}
244
+ actions={(
245
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
246
+ )}
247
+ >
248
+ <BoxedListContentRow>
249
+ Nullam id dolor id nibh ultricies vehicula ut id elit...
250
+ </BoxedListContentRow>
251
+ </BoxedListItem>
252
+ </BoxedList>
253
+
254
+ // with footer + different layout options.
255
+
256
+ <BoxedList>
257
+ <BoxedListItem
258
+ type="warning"
259
+ clickable={true}
260
+ media={(
261
+ <Icon name='calendar-list' />
262
+ )}
263
+ actions={(
264
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
265
+ )}
266
+ >
267
+ <BoxedListContentRow>
268
+ Vivamus sagittis lacus vel augue laoreet rutrum...
269
+ </BoxedListContentRow>
270
+ </BoxedListItem>
271
+ <BoxedListItem
272
+ type="primary"
273
+ clickable={true}
274
+ media={(
275
+ <AvatarWrapper size="medium">
276
+ <AvatarContentText text="JC" tooltipText="Joel Coen" />
277
+ </AvatarWrapper>
278
+ )}
279
+ footer={(
280
+ <ButtonGroup align='end'>
281
+ <Button size='small' style='hollow' text='Decline' onClick={()=> false} />
282
+ <Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
283
+ </ButtonGroup>
284
+ )}
285
+ >
286
+ <Heading className='sd-margin-b--1' type='h5'>Amet Mollis Porta</Heading>
287
+ <BoxedListContentRow>
288
+ Nullam id dolor id nibh ultricies vehicula...
289
+ </BoxedListContentRow>
290
+ </BoxedListItem>
291
+ <BoxedListItem
292
+ type="success"
293
+ clickable={true}
294
+ media={(
295
+ <AvatarWrapper size="medium">
296
+ <AvatarContentText text="EC" tooltipText="Ethan Coen" />
297
+ </AvatarWrapper>
298
+ )}
299
+ actions={(
300
+ <React.Fragment>
301
+ <IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
302
+ <IconButton icon="trash" ariaValue="Delete" onClick={()=> false} />
303
+ </React.Fragment>
304
+ )}
305
+ >
306
+ <BoxedListContentRow>
307
+ Cras mattis consectetur...
308
+ </BoxedListContentRow>
309
+ <BoxedListContentRow>
310
+ <Label type='success' text='In progress' style='translucent' />
311
+ </BoxedListContentRow>
312
+ </BoxedListItem>
313
+ <BoxedListItem
314
+ type="warning"
315
+ clickable={true}
316
+ media={(
317
+ <AvatarWrapper size="medium">
318
+ <AvatarContentText text="BL" tooltipText="Bunny Lebowski" />
319
+ </AvatarWrapper>
320
+ )}
321
+ actions={(
322
+ <IconButton icon="pencil" ariaValue="Edit" onClick={()=> false} />
323
+ )}
324
+ footer={(
325
+ <ButtonGroup align='end'>
326
+ <Button size='small' style='hollow' text='Decline' onClick={()=> false} />
327
+ <Button size='small' style='hollow' type='primary' text='Accept' onClick={()=> false} />
328
+ </ButtonGroup>
329
+ )}
330
+ >
331
+ <BoxedListContentRow>
332
+ <Heading className='sd-margin-e--auto' align='start' type='h4'>Dolor Bibenduma</Heading>
333
+ <Text align='end' color='light'>23.12.2021</Text>
334
+ </BoxedListContentRow>
335
+ <BoxedListContentRow>
336
+ <Text>
337
+ Cras justo odio, dapibus ac facilisis in...
338
+ </Text>
339
+ </BoxedListContentRow>
340
+ </BoxedListItem>
341
+ </BoxedList>
342
+ `}
343
+ </Markup.ReactMarkupCode>
344
+ </Markup.ReactMarkup>
345
+
346
+ <h3 className="docs-page__h3">Props</h3>
347
+ <p className="docs-page__paragraph">BoxedList</p>
348
+ <PropsList>
349
+ <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
350
+ </PropsList>
351
+ <p className="docs-page__paragraph">BoxedListItem</p>
352
+ <PropsList>
353
+ <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
354
+ <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
355
+ <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
356
+ <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
357
+ </PropsList>
358
+
359
+ </section>
360
+ )
361
+ }
362
+ }
@@ -24,33 +24,33 @@ export default class ButtonGroupsDoc extends React.Component {
24
24
  </Alert>
25
25
  <Markup.ReactMarkup>
26
26
  <Markup.ReactMarkupPreview>
27
- <p className="docs-page__paragraph">// Left</p>
27
+ <p className="docs-page__paragraph">// Start (left)</p>
28
28
  <div className="form__row form__row--flex docs-page__test-helper-2">
29
- <ButtonGroup align='left'>
29
+ <ButtonGroup align='start'>
30
30
  <Button text='one' style='hollow' onClick={()=> false} />
31
31
  <Button text='two' style='hollow' onClick={()=> false} />
32
32
  </ButtonGroup>
33
33
  </div>
34
34
  <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
35
- <ButtonGroup align='left'>
36
- <IconButton icon='home' tooltip={{text:'Home'}} onClick={()=> false} />
37
- <IconButton icon='bell' tooltip={{text:'Notifications'}} onClick={()=> false} />
38
- <IconButton icon='heart' tooltip={{text:'Favorites'}} onClick={()=> false} />
35
+ <ButtonGroup align='start'>
36
+ <IconButton icon='home' ariaValue='Home' onClick={()=> false} />
37
+ <IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
38
+ <IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
39
39
  </ButtonGroup>
40
40
  </div>
41
41
 
42
- <p className="docs-page__paragraph">// Right</p>
42
+ <p className="docs-page__paragraph">// End (right)</p>
43
43
  <div className="form__row form__row--flex docs-page__test-helper-2">
44
- <ButtonGroup align='right'>
44
+ <ButtonGroup align='end'>
45
45
  <Button text='Cancel' style='hollow' onClick={()=> false} />
46
46
  <Button text='Save' type='primary' onClick={()=> false} />
47
47
  </ButtonGroup>
48
48
  </div>
49
49
  <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
50
- <ButtonGroup align='right'>
51
- <IconButton icon='trash' tooltip={{text:'Delete'}} onClick={()=> false} />
52
- <IconButton icon='pencil' tooltip={{text:'Edit'}} onClick={()=> false} />
53
- <IconButton icon='close-small' tooltip={{text:'Close'}} onClick={()=> false} />
50
+ <ButtonGroup align='end'>
51
+ <IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
52
+ <IconButton icon='pencil' ariaValue='Edit' onClick={()=> false} />
53
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
54
54
  </ButtonGroup>
55
55
  </div>
56
56
  <p className="docs-page__paragraph">// Center</p>
@@ -60,9 +60,9 @@ export default class ButtonGroupsDoc extends React.Component {
60
60
  <Button text='two' style='hollow' onClick={()=> false} />
61
61
  </ButtonGroup>
62
62
  </div>
63
- <p className="docs-page__paragraph">// Left + Center + Right</p>
63
+ <p className="docs-page__paragraph">// Start + Center + End</p>
64
64
  <div className="form__row form__row--flex docs-page__test-helper-2">
65
- <ButtonGroup align='left'>
65
+ <ButtonGroup align='start'>
66
66
  <Button text='one' style='hollow' onClick={()=> false} />
67
67
  <Button text='two' style='hollow' onClick={()=> false} />
68
68
  </ButtonGroup>
@@ -70,38 +70,38 @@ export default class ButtonGroupsDoc extends React.Component {
70
70
  <Button text='three' style='hollow' onClick={()=> false} />
71
71
  <Button text='four' style='hollow' onClick={()=> false} />
72
72
  </ButtonGroup>
73
- <ButtonGroup align='right'>
73
+ <ButtonGroup align='end'>
74
74
  <Button text='Cancel' style='hollow' onClick={()=> false} />
75
75
  <Button text='Save' type='primary' onClick={()=> false} />
76
76
  </ButtonGroup>
77
77
  </div>
78
78
  </Markup.ReactMarkupPreview>
79
79
  <Markup.ReactMarkupCode>{`
80
- // Left
81
- <ButtonGroup align='left'>
80
+ // Start (left)
81
+ <ButtonGroup align='start'>
82
82
  <Button text='one' style='hollow' onClick={()=> false} />
83
83
  <Button text='two' style='hollow' onClick={()=> false} />
84
84
  </ButtonGroup>
85
- <ButtonGroup align='left'>
86
- <IconButton icon='home' tooltip={{text:'Home'}} onClick={()=> false} />
87
- <IconButton icon='bell' tooltip={{text:'Notifications'}} onClick={()=> false} />
88
- <IconButton icon='heart' tooltip={{text:'Favorites'}} onClick={()=> false} />
85
+ <ButtonGroup align='start'>
86
+ <IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
87
+ <IconButton icon='pencil' ariaValue='Edit' onClick={()=> false} />
88
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
89
89
  </ButtonGroup>
90
90
 
91
- // Right
92
- <ButtonGroup align='right'>
91
+ // End (right)
92
+ <ButtonGroup align='end'>
93
93
  <Button text='Cancel' style='hollow' onClick={()=> false} />
94
94
  <Button text='Save' type='primary' onClick={()=> false} />
95
95
  </ButtonGroup>
96
96
 
97
- <ButtonGroup align='right'>
98
- <IconButton icon='trash' tooltip={{text:'Delete'}} onClick={()=> false} />
99
- <IconButton icon='pencil' tooltip={{text:'Edit'}} onClick={()=> false} />
100
- <IconButton icon='close-small' tooltip={{text:'Close'}} onClick={()=> false} />
97
+ <ButtonGroup align='end'>
98
+ <IconButton icon='trash' ariaValue='Delete' onClick={()=> false} />
99
+ <IconButton icon='pencil' ariaValue='Edit' onClick={()=> false} />
100
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
101
101
  </ButtonGroup>
102
102
 
103
- // Left + Center + Right
104
- <ButtonGroup align='left'>
103
+ // Start + Center + End
104
+ <ButtonGroup align='start'>
105
105
  <Button text='one' style='hollow' onClick={()=> false} />
106
106
  <Button text='two' style='hollow' onClick={()=> false} />
107
107
  </ButtonGroup>
@@ -109,7 +109,7 @@ export default class ButtonGroupsDoc extends React.Component {
109
109
  <Button text='three' style='hollow' onClick={()=> false} />
110
110
  <Button text='four' style='hollow' onClick={()=> false} />
111
111
  </ButtonGroup>
112
- <ButtonGroup align='right'>
112
+ <ButtonGroup align='end'>
113
113
  <Button text='Cancel' style='hollow' onClick={()=> false} />
114
114
  <Button text='Save' type='primary' onClick={()=> false} />
115
115
  </ButtonGroup>
@@ -143,9 +143,10 @@ export default class ButtonGroupsDoc extends React.Component {
143
143
  <h3 className="docs-page__h3">Props</h3>
144
144
  <PropsList>
145
145
  <Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Specifies orientation for child components of ButtonGroup'/>
146
- <Prop name='spaces' isRequired={false} type='comfort | compact' default='comfort' description='Space between buttons: comfort (default) or compact.'/>
147
- <Prop name='align' isRequired={false} type='left | right | center | inline' default='left' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
146
+ <Prop name='spaces' isRequired={false} type='comfort | compact | no-space' default='comfort' description='Space (gap) between buttons: comfort (default), compact and no-space.'/>
147
+ <Prop name='align' isRequired={false} type='start | end | center | inline | sub' default='start' description='Alignment in relation to the parent element. Inline value renders the ButtonGroup without pushing surrounding elements.'/>
148
148
  <Prop name='padded' isRequired={false} type='boolean' default='false' description='Adds predefined space to the side based on alignment and orientation.'/>
149
+ <Prop name='subgroup' isRequired={false} type='boolean' default='false' description='For nested ButtonGroups. Set to true for a ButtonGroup nested inside a parent ButtonGroup.'/>
149
150
  </PropsList>
150
151
 
151
152
 
@@ -161,7 +162,7 @@ export default class ButtonGroupsDoc extends React.Component {
161
162
  <Markup.ReactMarkupPreview>
162
163
  <p className="docs-page__paragraph">// Default (small)</p>
163
164
  <div className="form__row form__row--flex docs-page__test-helper-2">
164
- <ButtonGroup align='left'>
165
+ <ButtonGroup align='start'>
165
166
  <Button text='one' style='hollow' onClick={()=> false} />
166
167
  <Button text='two' style='hollow' onClick={()=> false} />
167
168
  <Divider />
@@ -172,7 +173,7 @@ export default class ButtonGroupsDoc extends React.Component {
172
173
 
173
174
  <p className="docs-page__paragraph">// Small with border</p>
174
175
  <div className="form__row form__row--flex docs-page__test-helper-2">
175
- <ButtonGroup align='right'>
176
+ <ButtonGroup align='end'>
176
177
  <Button text='one' style='hollow' onClick={()=> false} />
177
178
  <Button text='two' style='hollow' onClick={()=> false} />
178
179
  <Divider border={true} />
@@ -183,35 +184,35 @@ export default class ButtonGroupsDoc extends React.Component {
183
184
 
184
185
  <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
185
186
  <ButtonGroup align='center'>
186
- <IconButton icon='undo' tooltip={{text:'Undo'}} onClick={()=> false} />
187
- <IconButton icon='redo' tooltip={{text:'Redo'}} onClick={()=> false} />
188
- <IconButton icon='print' tooltip={{text:'Print'}} onClick={()=> false} />
187
+ <IconButton icon='undo' ariaValue='Undo' onClick={()=> false} />
188
+ <IconButton icon='redo' ariaValue='Redo' onClick={()=> false} />
189
+ <IconButton icon='print' ariaValue='Print' onClick={()=> false} />
189
190
  <Divider border={true} />
190
- <IconButton icon='bold' tooltip={{text:'Bold'}} onClick={()=> false} />
191
- <IconButton icon='italic' tooltip={{text:'Italic'}} onClick={()=> false} />
192
- <IconButton icon='underline' tooltip={{text:'Underline'}} onClick={()=> false} />
193
- <IconButton icon='strikethrough' tooltip={{text:'Strikethrough'}} onClick={()=> false} />
191
+ <IconButton icon='bold' ariaValue='Bold' onClick={()=> false} />
192
+ <IconButton icon='italic' ariaValue='Italic' onClick={()=> false} />
193
+ <IconButton icon='underline' ariaValue='Underline' onClick={()=> false} />
194
+ <IconButton icon='strikethrough' ariaValue='Strikethrough' onClick={()=> false} />
194
195
  <Divider border={true} />
195
- <IconButton icon='align-left' tooltip={{text:'Align left'}} onClick={()=> false} />
196
- <IconButton icon='align-center' tooltip={{text:'Align center'}} onClick={()=> false} />
197
- <IconButton icon='align-right' tooltip={{text:'Align right'}} onClick={()=> false} />
196
+ <IconButton icon='align-left' ariaValue='Align left' onClick={()=> false} />
197
+ <IconButton icon='align-center' ariaValue='Align center' onClick={()=> false} />
198
+ <IconButton icon='align-right' ariaValue='Align right' onClick={()=> false} />
198
199
  </ButtonGroup>
199
200
  </div>
200
201
 
201
202
  <p className="docs-page__paragraph">// Medium</p>
202
203
  <div className="form__row form__row--flex docs-page__test-helper-2 sd-margin-t--2">
203
- <ButtonGroup align='left'>
204
- <IconButton icon='home' tooltip={{text:'Home'}} onClick={()=> false} />
205
- <IconButton icon='slideshow' tooltip={{text:'Gallery'}} onClick={()=> false} />
204
+ <ButtonGroup align='start'>
205
+ <IconButton icon='home' ariaValue='Home' onClick={()=> false} />
206
+ <IconButton icon='slideshow' ariaValue='Gallery' onClick={()=> false} />
206
207
  <Divider size='medium' />
207
- <IconButton icon='bell' tooltip={{text:'Notifications'}} onClick={()=> false} />
208
- <IconButton icon='heart' tooltip={{text:'Favorites'}} onClick={()=> false} />
208
+ <IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
209
+ <IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
209
210
  </ButtonGroup>
210
211
  </div>
211
212
  </Markup.ReactMarkupPreview>
212
213
  <Markup.ReactMarkupCode>{`
213
214
  // // Default (small)
214
- <ButtonGroup align='left'>
215
+ <ButtonGroup align='start'>
215
216
  <Button text='one' style='hollow' onClick={()=> false} />
216
217
  <Button text='two' style='hollow' onClick={()=> false} />
217
218
  <Divider />
@@ -220,7 +221,7 @@ export default class ButtonGroupsDoc extends React.Component {
220
221
  </ButtonGroup>
221
222
 
222
223
  // Small with border
223
- <ButtonGroup align='right'>
224
+ <ButtonGroup align='end'>
224
225
  <Button text='one' style='hollow' onClick={()=> false} />
225
226
  <Button text='two' style='hollow' onClick={()=> false} />
226
227
  <Divider border={true} />
@@ -229,27 +230,27 @@ export default class ButtonGroupsDoc extends React.Component {
229
230
  </ButtonGroup>
230
231
 
231
232
  <ButtonGroup align='center'>
232
- <IconButton icon='undo' tooltip={{text:'Undo'}} onClick={()=> false} />
233
- <IconButton icon='redo' tooltip={{text:'Redo'}} onClick={()=> false} />
234
- <IconButton icon='print' tooltip={{text:'Print'}} onClick={()=> false} />
233
+ <IconButton icon='undo' ariaValue='Undo' onClick={()=> false} />
234
+ <IconButton icon='redo' ariaValue='Redo' onClick={()=> false} />
235
+ <IconButton icon='print' ariaValue='Print' onClick={()=> false} />
235
236
  <Divider border={true} />
236
- <IconButton icon='bold' tooltip={{text:'Bold'}} onClick={()=> false} />
237
- <IconButton icon='italic' tooltip={{text:'Italic'}} onClick={()=> false} />
238
- <IconButton icon='underline' tooltip={{text:'Underline'}} onClick={()=> false} />
239
- <IconButton icon='strikethrough' tooltip={{text:'Strikethrough'}} onClick={()=> false} />
237
+ <IconButton icon='bold' ariaValue='Bold' onClick={()=> false} />
238
+ <IconButton icon='italic' ariaValue='Italic' onClick={()=> false} />
239
+ <IconButton icon='underline' ariaValue='Underline' onClick={()=> false} />
240
+ <IconButton icon='strikethrough' ariaValue='Strikethrough' onClick={()=> false} />
240
241
  <Divider border={true} />
241
- <IconButton icon='align-left' tooltip={{text:'Align left'}} onClick={()=> false} />
242
- <IconButton icon='align-center' tooltip={{text:'Align center'}} onClick={()=> false} />
243
- <IconButton icon='align-right' tooltip={{text:'Align right'}} onClick={()=> false} />
242
+ <IconButton icon='align-left' ariaValue='Align left' onClick={()=> false} />
243
+ <IconButton icon='align-center' ariaValue='Align center' onClick={()=> false} />
244
+ <IconButton icon='align-right' ariaValue='Align right' onClick={()=> false} />
244
245
  </ButtonGroup>
245
246
 
246
247
  // Medium
247
248
  <ButtonGroup align='left'>
248
- <IconButton icon='home' tooltip={{text:'Home'}} onClick={()=> false} />
249
- <IconButton icon='slideshow' tooltip={{text:'Gallery'}} onClick={()=> false} />
249
+ <IconButton icon='home' ariaValue='Home' onClick={()=> false} />
250
+ <IconButton icon='slideshow' ariaValue='Gallery' onClick={()=> false} />
250
251
  <Divider size='medium' />
251
- <IconButton icon='bell' tooltip={{text:'Notifications'}} onClick={()=> false} />
252
- <IconButton icon='heart' tooltip={{text:'Favorites'}} onClick={()=> false} />
252
+ <IconButton icon='bell' ariaValue='Notifications' onClick={()=> false} />
253
+ <IconButton icon='heart' ariaValue='Favorites' onClick={()=> false} />
253
254
  </ButtonGroup>
254
255
  `}
255
256
  </Markup.ReactMarkupCode>