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

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 (402) hide show
  1. package/app/img/spinner.svg +3 -0
  2. package/app/img/themes/theme-base.svg +1 -0
  3. package/app/img/themes/theme-contrast.svg +45 -0
  4. package/app/img/themes/theme-dark.svg +1 -0
  5. package/app/img/themes/theme-light.svg +1 -0
  6. package/app/index.js +1 -1
  7. package/app/scripts/modals.js +22 -9
  8. package/app/styles/_accessibility.scss +311 -4
  9. package/app/styles/_alerts.scss +57 -19
  10. package/app/styles/_avatar.scss +25 -1
  11. package/app/styles/_badge.scss +2 -2
  12. package/app/styles/_big-icon-font.scss +1 -1
  13. package/app/styles/_boxed-list.scss +38 -18
  14. package/app/styles/_buttons.scss +431 -332
  15. package/app/styles/_carousel.scss +17 -11
  16. package/app/styles/_design-tokens.scss +2 -0
  17. package/app/styles/_helpers.scss +186 -30
  18. package/app/styles/_icon-font.scss +1 -1
  19. package/app/styles/_labels.scss +12 -6
  20. package/app/styles/_loaders.scss +13 -0
  21. package/app/styles/_master-desk.scss +5 -5
  22. package/app/styles/_mixins.scss +13 -3
  23. package/app/styles/_modals.scss +4 -28
  24. package/app/styles/_normalize.scss +1 -0
  25. package/app/styles/_panel-info.scss +19 -14
  26. package/app/styles/_sd-tag-input.scss +104 -3
  27. package/app/styles/_simple-list.scss +39 -17
  28. package/app/styles/_spinner.scss +46 -0
  29. package/app/styles/_tabs.scss +6 -8
  30. package/app/styles/_tag-labels.scss +11 -2
  31. package/app/styles/_thumb-carousel.scss +11 -10
  32. package/app/styles/_toggle-box.scss +46 -12
  33. package/app/styles/_toggle-button.scss +42 -0
  34. package/app/styles/_tooltips.scss +3 -3
  35. package/app/styles/_variables.scss +0 -1
  36. package/app/styles/app.scss +9 -2
  37. package/app/styles/components/_card-item.scss +33 -21
  38. package/app/styles/components/_list-item.scss +9 -4
  39. package/app/styles/components/_sd-dropzone.scss +78 -0
  40. package/app/styles/components/_sd-grid-item.scss +2 -2
  41. package/app/styles/components/_sd-searchbar.scss +5 -98
  42. package/app/styles/components/_subnav.scss +83 -61
  43. package/app/styles/components/_theme-selector.scss +189 -0
  44. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  45. package/app/styles/{variables → design-tokens}/_new-colors.scss +34 -20
  46. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  47. package/app/styles/editor/_editor-buttons.scss +54 -0
  48. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  49. package/app/styles/form-elements/_checkbox.scss +85 -58
  50. package/app/styles/form-elements/_forms-general.scss +90 -14
  51. package/app/styles/form-elements/_inputs.scss +22 -3
  52. package/app/styles/form-elements/_select-grid.scss +79 -0
  53. package/app/styles/grids/_basic-grid.scss +52 -26
  54. package/app/styles/grids/_grid-layout.scss +35 -21
  55. package/app/styles/grids/_layout-grid.scss +4 -4
  56. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  57. package/app/styles/interface-elements/_side-panel.scss +87 -58
  58. package/app/styles/layout/_basic-layout.scss +1 -4
  59. package/app/styles/layout/_container.scss +32 -0
  60. package/app/styles/layout/_editor.scss +306 -0
  61. package/app/styles/menus/_sd-left-navigation.scss +14 -2
  62. package/app/styles/menus/_sd-sidebar-menu.scss +102 -9
  63. package/app/styles/pr-superdesk-theme.scss +3 -0
  64. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  65. package/app/styles/primereact/_pr-dropdown.scss +157 -8
  66. package/app/styles/primereact/_pr-general.scss +4 -0
  67. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  68. package/app/styles/variables/_colors.scss +2 -452
  69. package/app/styles/variables/_dimensions.scss +85 -1
  70. package/app/styles/variables/_form-elements.scss +0 -2
  71. package/app-typescript/components/Alert.tsx +16 -1
  72. package/app-typescript/components/Avatar.tsx +21 -0
  73. package/app-typescript/components/Button.tsx +7 -1
  74. package/app-typescript/components/ButtonGroup.tsx +5 -4
  75. package/app-typescript/components/Carousel.tsx +1 -1
  76. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  77. package/app-typescript/components/CheckGroup.tsx +2 -1
  78. package/app-typescript/components/Checkbox.tsx +7 -3
  79. package/app-typescript/components/CheckboxButton.tsx +9 -2
  80. package/app-typescript/components/DatePicker.tsx +6 -2
  81. package/app-typescript/components/DropZone.tsx +89 -0
  82. package/app-typescript/components/Dropdown.tsx +9 -1
  83. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  84. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  85. package/app-typescript/components/Form/FormItem.tsx +20 -0
  86. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  87. package/app-typescript/components/Form/FormRow.tsx +40 -0
  88. package/app-typescript/components/Form/FormText.tsx +15 -0
  89. package/app-typescript/components/Form/index.tsx +5 -0
  90. package/app-typescript/components/IconButton.tsx +26 -12
  91. package/app-typescript/components/IconPicker.tsx +277 -0
  92. package/app-typescript/components/Input.tsx +41 -8
  93. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  94. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  95. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  96. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  97. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  98. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  99. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  100. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  101. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  102. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  103. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  104. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  105. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  106. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  107. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  108. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  109. package/app-typescript/components/Layouts/Container.tsx +30 -0
  110. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  111. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  112. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  113. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  114. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  115. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  116. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  117. package/app-typescript/components/Layouts/index.tsx +25 -0
  118. package/app-typescript/components/LeftMenu.tsx +123 -49
  119. package/app-typescript/components/ListItemLoader.tsx +30 -0
  120. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  121. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  122. package/app-typescript/components/Lists/index.tsx +2 -0
  123. package/app-typescript/components/Modal.tsx +1 -1
  124. package/app-typescript/components/MultiSelect.tsx +69 -0
  125. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  126. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  127. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  128. package/app-typescript/components/Navigation/index.tsx +3 -0
  129. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  130. package/app-typescript/components/RadioGroup.tsx +69 -0
  131. package/app-typescript/components/Select.tsx +12 -4
  132. package/app-typescript/components/SelectGrid.tsx +233 -0
  133. package/app-typescript/components/Skeleton.tsx +48 -0
  134. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  135. package/app-typescript/components/Spinner.tsx +32 -0
  136. package/app-typescript/components/SubNav.tsx +25 -4
  137. package/app-typescript/components/Switch.tsx +34 -12
  138. package/app-typescript/components/Tag.tsx +31 -7
  139. package/app-typescript/components/Text/Heading.tsx +67 -0
  140. package/app-typescript/components/Text/Text.tsx +36 -0
  141. package/app-typescript/components/ThemeSelector.tsx +113 -0
  142. package/app-typescript/components/Togglebox.tsx +8 -6
  143. package/app-typescript/components/TreeSelect.tsx +330 -0
  144. package/app-typescript/index.ts +19 -3
  145. package/dist/avatar-2.jpg +0 -0
  146. package/dist/avatar-3.jpg +0 -0
  147. package/dist/avatar-4.jpg +0 -0
  148. package/dist/avatar-5.jpg +0 -0
  149. package/dist/avatar-6.jpg +0 -0
  150. package/dist/components/basic-grid.html +1 -1
  151. package/dist/components/checkbox.html +1 -1
  152. package/dist/components/modals.html +1 -0
  153. package/dist/examples.bundle.css +99 -1225
  154. package/dist/examples.bundle.js +24704 -15626
  155. package/dist/playgrounds/boxed-list.html +1 -1
  156. package/dist/playgrounds/cards.html +9 -4
  157. package/dist/playgrounds/editor-3-test.html +15 -0
  158. package/dist/playgrounds/form-layout.html +9 -7
  159. package/dist/playgrounds/master-desk.html +1 -3
  160. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  161. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  162. package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
  163. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  164. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  165. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  166. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  167. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  168. package/dist/react/Alerts.tsx +91 -18
  169. package/dist/react/Avatar.tsx +314 -127
  170. package/dist/react/BoxedList.tsx +362 -0
  171. package/dist/react/ButtonGroups.tsx +66 -65
  172. package/dist/react/Buttons.tsx +65 -113
  173. package/dist/react/Carousel.tsx +2 -3
  174. package/dist/react/Checkboxs.tsx +66 -25
  175. package/dist/react/Container.tsx +143 -0
  176. package/dist/react/DropZone.tsx +103 -0
  177. package/dist/react/Heading.tsx +106 -0
  178. package/dist/react/IconButtons.tsx +51 -21
  179. package/dist/react/IconFont.tsx +7 -6
  180. package/dist/react/IconPicker.tsx +65 -0
  181. package/dist/react/Index.tsx +100 -19
  182. package/dist/react/Inputs.tsx +9 -3
  183. package/dist/react/LeftNavigations.tsx +161 -9
  184. package/dist/react/ListItems.tsx +34 -0
  185. package/dist/react/Modal.tsx +7 -7
  186. package/dist/react/MultiSelect.tsx +193 -0
  187. package/dist/react/NavButtons.tsx +4 -4
  188. package/dist/react/Panel.tsx +366 -0
  189. package/dist/react/QuickNavigationBar.tsx +142 -0
  190. package/dist/react/RadioGroup.tsx +351 -0
  191. package/dist/react/SelectGrid.tsx +121 -0
  192. package/dist/react/Selects.tsx +2 -0
  193. package/dist/react/SimpleList.tsx +148 -0
  194. package/dist/react/SubNav.tsx +65 -18
  195. package/dist/react/Tags.tsx +57 -5
  196. package/dist/react/Text.tsx +134 -0
  197. package/dist/react/TreeSelect.tsx +178 -0
  198. package/dist/react.html +4 -0
  199. package/dist/superdesk-ui.bundle.css +26706 -20044
  200. package/dist/superdesk-ui.bundle.js +8456 -3426
  201. package/dist/vendor.bundle.js +13677 -13655
  202. package/examples/css/docs-page.css +98 -27
  203. package/examples/img/avatar-2.jpg +0 -0
  204. package/examples/img/avatar-3.jpg +0 -0
  205. package/examples/img/avatar-4.jpg +0 -0
  206. package/examples/img/avatar-5.jpg +0 -0
  207. package/examples/img/avatar-6.jpg +0 -0
  208. package/examples/index.js +16 -0
  209. package/examples/pages/components/basic-grid.html +1 -1
  210. package/examples/pages/components/checkbox.html +1 -1
  211. package/examples/pages/components/modals.html +1 -0
  212. package/examples/pages/playgrounds/boxed-list.html +1 -1
  213. package/examples/pages/playgrounds/cards.html +9 -4
  214. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  215. package/examples/pages/playgrounds/form-layout.html +9 -7
  216. package/examples/pages/playgrounds/master-desk.html +1 -3
  217. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  218. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  219. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
  220. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  221. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  222. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  223. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  224. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  225. package/examples/pages/react/Alerts.tsx +91 -18
  226. package/examples/pages/react/Avatar.tsx +314 -127
  227. package/examples/pages/react/BoxedList.tsx +362 -0
  228. package/examples/pages/react/ButtonGroups.tsx +66 -65
  229. package/examples/pages/react/Buttons.tsx +65 -113
  230. package/examples/pages/react/Carousel.tsx +2 -3
  231. package/examples/pages/react/Checkboxs.tsx +66 -25
  232. package/examples/pages/react/Container.tsx +143 -0
  233. package/examples/pages/react/DropZone.tsx +103 -0
  234. package/examples/pages/react/Heading.tsx +106 -0
  235. package/examples/pages/react/IconButtons.tsx +51 -21
  236. package/examples/pages/react/IconFont.tsx +7 -6
  237. package/examples/pages/react/IconPicker.tsx +65 -0
  238. package/examples/pages/react/Index.tsx +100 -19
  239. package/examples/pages/react/Inputs.tsx +9 -3
  240. package/examples/pages/react/LeftNavigations.tsx +161 -9
  241. package/examples/pages/react/ListItems.tsx +34 -0
  242. package/examples/pages/react/Modal.tsx +7 -7
  243. package/examples/pages/react/MultiSelect.tsx +193 -0
  244. package/examples/pages/react/NavButtons.tsx +4 -4
  245. package/examples/pages/react/Panel.tsx +366 -0
  246. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  247. package/examples/pages/react/RadioGroup.tsx +351 -0
  248. package/examples/pages/react/SelectGrid.tsx +121 -0
  249. package/examples/pages/react/Selects.tsx +2 -0
  250. package/examples/pages/react/SimpleList.tsx +148 -0
  251. package/examples/pages/react/SubNav.tsx +65 -18
  252. package/examples/pages/react/Tags.tsx +57 -5
  253. package/examples/pages/react/Text.tsx +134 -0
  254. package/examples/pages/react/TreeSelect.tsx +178 -0
  255. package/examples/pages/react.html +4 -0
  256. package/package.json +9 -5
  257. package/react/components/Alert.d.ts +3 -0
  258. package/react/components/Alert.js +9 -1
  259. package/react/components/Avatar.d.ts +9 -0
  260. package/react/components/Avatar.js +19 -1
  261. package/react/components/Button.d.ts +2 -0
  262. package/react/components/Button.js +4 -2
  263. package/react/components/ButtonGroup.d.ts +3 -2
  264. package/react/components/ButtonGroup.js +2 -2
  265. package/react/components/Carousel.js +1 -1
  266. package/react/components/CheckButtonGroup.d.ts +3 -1
  267. package/react/components/CheckButtonGroup.js +8 -2
  268. package/react/components/CheckGroup.d.ts +1 -0
  269. package/react/components/CheckGroup.js +1 -1
  270. package/react/components/Checkbox.d.ts +2 -1
  271. package/react/components/Checkbox.js +2 -2
  272. package/react/components/CheckboxButton.d.ts +1 -0
  273. package/react/components/CheckboxButton.js +2 -2
  274. package/react/components/DatePicker.js +7 -2
  275. package/react/components/DropZone.d.ts +25 -0
  276. package/react/components/DropZone.js +93 -0
  277. package/react/components/Dropdown.d.ts +1 -0
  278. package/react/components/Dropdown.js +3 -3
  279. package/react/components/Form/FormGroup.d.ts +13 -0
  280. package/react/components/Form/FormGroup.js +61 -0
  281. package/react/components/Form/FormItem.d.ts +9 -0
  282. package/react/components/Form/FormItem.js +54 -0
  283. package/react/components/Form/FormLabel.d.ts +10 -0
  284. package/react/components/Form/FormLabel.js +54 -0
  285. package/react/components/Form/FormRow.d.ts +17 -0
  286. package/react/components/Form/FormRow.js +62 -0
  287. package/react/components/Form/FormText.d.ts +8 -0
  288. package/react/components/Form/FormText.js +47 -0
  289. package/react/components/Form/index.d.ts +5 -0
  290. package/react/components/Form/index.js +12 -0
  291. package/react/components/IconButton.d.ts +9 -2
  292. package/react/components/IconButton.js +13 -5
  293. package/react/components/IconPicker.d.ts +24 -0
  294. package/react/components/IconPicker.js +283 -0
  295. package/react/components/Input.d.ts +20 -3
  296. package/react/components/Input.js +12 -3
  297. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  298. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  299. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  300. package/react/components/Layouts/AuthoringFrame.js +56 -0
  301. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  302. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  303. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  304. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  305. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  306. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  307. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  308. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  309. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  310. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  311. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  312. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  313. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  314. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  315. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  316. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  317. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  318. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  319. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  320. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  321. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  322. package/react/components/Layouts/AuthoringMain.js +53 -0
  323. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  324. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  325. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  326. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  327. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  328. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  329. package/react/components/Layouts/Container.d.ts +14 -0
  330. package/react/components/Layouts/Container.js +60 -0
  331. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  332. package/react/components/Layouts/HeaderPanel.js +47 -0
  333. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  334. package/react/components/Layouts/LayoutContainer.js +47 -0
  335. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  336. package/react/components/Layouts/LeftPanel.js +54 -0
  337. package/react/components/Layouts/MainPanel.d.ts +10 -0
  338. package/react/components/Layouts/MainPanel.js +50 -0
  339. package/react/components/Layouts/PageLayout.d.ts +16 -0
  340. package/react/components/Layouts/PageLayout.js +64 -0
  341. package/react/components/Layouts/Panel.d.ts +65 -0
  342. package/react/components/Layouts/Panel.js +166 -0
  343. package/react/components/Layouts/RightPanel.d.ts +9 -0
  344. package/react/components/Layouts/RightPanel.js +47 -0
  345. package/react/components/Layouts/index.d.ts +24 -0
  346. package/react/components/Layouts/index.js +55 -0
  347. package/react/components/LeftMenu.d.ts +8 -3
  348. package/react/components/LeftMenu.js +55 -16
  349. package/react/components/ListItemLoader.d.ts +4 -0
  350. package/react/components/ListItemLoader.js +62 -0
  351. package/react/components/Lists/BoxedList.d.ts +36 -0
  352. package/react/components/Lists/BoxedList.js +137 -0
  353. package/react/components/Lists/SimpleList.d.ts +21 -0
  354. package/react/components/Lists/SimpleList.js +78 -0
  355. package/react/components/Lists/index.d.ts +2 -0
  356. package/react/components/Lists/index.js +9 -0
  357. package/react/components/Modal.js +1 -1
  358. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  359. package/react/components/Navigation/QuickNavBar.js +113 -0
  360. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  361. package/react/components/Navigation/SideBarMenu.js +77 -0
  362. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  363. package/react/components/Navigation/SideBarTabs.js +82 -0
  364. package/react/components/Navigation/index.d.ts +3 -0
  365. package/react/components/Navigation/index.js +8 -0
  366. package/react/components/RadioButtonGroup.d.ts +29 -0
  367. package/react/components/RadioButtonGroup.js +89 -0
  368. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  369. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  370. package/react/components/Select.d.ts +3 -1
  371. package/react/components/Select.js +5 -3
  372. package/react/components/SelectGrid.d.ts +45 -0
  373. package/react/components/SelectGrid.js +179 -0
  374. package/react/components/Skeleton.d.ts +30 -0
  375. package/react/components/Skeleton.js +55 -0
  376. package/react/components/SlidingToolbar.d.ts +1 -1
  377. package/react/components/SlidingToolbar.js +11 -1
  378. package/react/components/Spinner.d.ts +11 -0
  379. package/react/components/Spinner.js +69 -0
  380. package/react/components/SubNav.d.ts +8 -1
  381. package/react/components/SubNav.js +22 -4
  382. package/react/components/Switch.d.ts +4 -1
  383. package/react/components/Switch.js +19 -7
  384. package/react/components/TabCustom.d.ts +0 -1
  385. package/react/components/Tag.d.ts +3 -2
  386. package/react/components/Tag.js +16 -5
  387. package/react/components/TagInput.d.ts +0 -1
  388. package/react/components/Text/Heading.d.ts +15 -0
  389. package/react/components/Text/Heading.js +77 -0
  390. package/react/components/Text/Text.d.ts +15 -0
  391. package/react/components/Text/Text.js +65 -0
  392. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  393. package/react/components/ThemeSelector.js +112 -0
  394. package/react/components/Togglebox.d.ts +1 -0
  395. package/react/components/Togglebox.js +9 -2
  396. package/react/index.d.ts +17 -3
  397. package/react/index.js +40 -4
  398. package/app/styles/variables/_design-tokens-general.scss +0 -136
  399. package/app-typescript/components/Radio.tsx +0 -57
  400. package/app-typescript/components/RadioButton.tsx +0 -57
  401. package/dist/react/Radios.tsx +0 -391
  402. package/examples/pages/react/Radios.tsx +0 -391
@@ -6,7 +6,6 @@ import { ButtonGroup, Button, NavButton, Dropdown } from '../../../app-typescrip
6
6
  import {
7
7
  Switch,
8
8
  Route,
9
-
10
9
  } from "react-router-dom";
11
10
 
12
11
  import InputsDoc from './Inputs';
@@ -24,10 +23,11 @@ import TooltipDoc from './Tooltips';
24
23
  import DatePickerDoc from './DatePicker';
25
24
  import TimePickerDoc from './TimePicker';
26
25
  import SwitchDoc from './Switch';
27
- import RadiosDoc from './Radios';
26
+ import RadioGroupDoc from './RadioGroup';
28
27
  import CheckboxsDoc from './Checkboxs';
29
28
  import TabsDoc from './Tabs';
30
29
  import LeftNavigationsDoc from './LeftNavigations';
30
+ import QuickNavBarDoc from './QuickNavigationBar';
31
31
  import NavButtonsDoc from './NavButtons';
32
32
  import IconFontDoc from './IconFont';
33
33
  import BigIconFontDoc from './BigIconFont';
@@ -43,9 +43,21 @@ import ModalDoc from './Modal';
43
43
  import CarouselDoc from './Carousel';
44
44
  import ContentDividerDoc from './ContentDivider';
45
45
  import ToggleboxDocs from './Togglebox';
46
+ import ListItemsDoc from './ListItems';
47
+ import PanelDoc from './Panel';
48
+ import SelectGridDocs from './SelectGrid';
49
+ import IconPickerDocs from "./IconPicker";
50
+ import SimpleListDoc from "./SimpleList";
51
+ import BoxedListDoc from "./BoxedList";
52
+ import HeadingDoc from "./Heading";
53
+ import TextDoc from "./Text";
54
+ import ContainerDoc from './Container';
55
+ import DropZoneDoc from './DropZone';
46
56
 
47
57
  import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
48
58
  import { SelectWithTemplateDocs } from './SelectWithTemplate';
59
+ import { MultiselectDocs } from './MultiSelect';
60
+ import { TreeSelectDocs } from './TreeSelect';
49
61
  import { PopoverDoc } from './Popover';
50
62
  import { MenuDocs } from './Menu';
51
63
 
@@ -115,6 +127,9 @@ const pages = {
115
127
  'left-navigation': {
116
128
  name: 'Left navigation'
117
129
  },
130
+ 'Quick-navigation-bar': {
131
+ name: 'Quick navigation bar'
132
+ },
118
133
  'sub-navigation': {
119
134
  name: 'Sub navigation bar'
120
135
  },
@@ -123,26 +138,57 @@ const pages = {
123
138
  containerComponents: {
124
139
  name: "Containers",
125
140
  items: {
141
+ 'container': {
142
+ name: 'Container component'
143
+ },
126
144
  'empty-states': {
127
145
  name: 'Empty states'
128
146
  },
129
147
  'grid-item': {
130
148
  name: 'Grid Item'
131
149
  },
150
+ 'panel': {
151
+ name: 'Panel'
152
+ },
132
153
  }
133
154
  },
134
155
  layoutComponents: {
135
156
  name: "Layout",
136
157
  items: {
137
- 'grid-list': {
138
- name: 'Grid List'
139
- },
140
158
  'content-divider': {
141
159
  name: 'Content Divider'
142
160
  },
143
161
  "togglebox": {
144
162
  name: "Togglebox"
145
- }
163
+ },
164
+ }
165
+ },
166
+ textComponents: {
167
+ name: "Text",
168
+ items: {
169
+ 'heading': {
170
+ name: 'Heading component'
171
+ },
172
+ 'text': {
173
+ name: 'Text component'
174
+ },
175
+ }
176
+ },
177
+ listComponents: {
178
+ name: "Lists",
179
+ items: {
180
+ 'grid-list': {
181
+ name: 'Grid List'
182
+ },
183
+ 'list-items': {
184
+ name: 'List items'
185
+ },
186
+ 'simple-list': {
187
+ name: 'Simple list'
188
+ },
189
+ 'boxed-list': {
190
+ name: 'Boxed list'
191
+ },
146
192
  }
147
193
  },
148
194
  formComponents: {
@@ -160,24 +206,39 @@ const pages = {
160
206
  'select': {
161
207
  name: 'Select',
162
208
  },
209
+ 'select-grid': {
210
+ name: 'Select Grid',
211
+ },
163
212
  'select-with-template': {
164
213
  name: 'Select with template',
165
214
  },
215
+ 'multiselect': {
216
+ name: 'MultiSelect',
217
+ },
218
+ 'treeselect': {
219
+ name: 'TreeSelect',
220
+ },
166
221
  'date-picker': {
167
222
  name: 'Date Picker',
168
223
  },
169
224
  'time-picker': {
170
225
  name: 'Time Picker',
171
226
  },
227
+ 'icon-picker': {
228
+ name: 'Icon Picker',
229
+ },
172
230
  'switch': {
173
231
  name: 'Switch'
174
232
  },
175
- 'radio': {
176
- name: 'Radio'
233
+ 'radiogroup': {
234
+ name: 'RadioGroup'
177
235
  },
178
236
  'checkbox': {
179
237
  name: 'Checkbox'
180
- }
238
+ },
239
+ 'dropzone': {
240
+ name: 'DropZone'
241
+ },
181
242
  }
182
243
  },
183
244
  generalComponents: {
@@ -196,40 +257,48 @@ interface IProps {
196
257
  theme?: string;
197
258
  }
198
259
  interface IState {
199
- theme: 'dark' | 'light' | string;
260
+ theme: 'dark-ui' | 'light-ui' | string;
200
261
  }
201
262
 
202
263
  class ReactDoc extends React.Component<IProps, IState> {
203
264
  constructor(props: IProps) {
204
265
  super(props);
205
266
  this.state = {
206
- theme: 'light',
267
+ theme: 'light-ui',
207
268
  }
208
269
  this.handleTheme = this.handleTheme.bind(this);
209
270
  }
271
+
210
272
  handleTheme(newTheme: string) {
273
+ document.body.setAttribute('data-theme', newTheme);
274
+
211
275
  this.setState({
212
276
  theme: newTheme
213
277
  })
214
278
  }
279
+
280
+ checkTheme(theme: string) {
281
+ return this.state.theme === theme;
282
+ }
283
+
215
284
  render() {
216
285
  return (
217
286
  <React.Fragment>
218
287
  <ReactNav pages={pages} />
219
- <main className="docs-page__content docs-page__container-fluid" data-theme={this.state.theme}>
288
+ <main className="docs-page__content docs-page__container-fluid">
220
289
  <div className="docs-page__fla-button-container">
221
290
  <Dropdown
222
291
  items={[
223
292
  {
224
293
  type: 'group', label: 'Chose a theme', items: [
225
294
  'divider',
226
- { label: 'Light', icon: 'adjust', onSelect: () => this.handleTheme('light-ui')},
227
- { label: 'Dark', icon: 'adjust', onSelect: () => this.handleTheme('dark-ui')},
228
- { label: 'Accessible Light', icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui')},
295
+ { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
296
+ { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
297
+ { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
229
298
  ]
230
299
  },
231
300
  ]}>
232
- <button className="docs-page__fla-button" aria-label="Change theme" onClick={()=> false}>
301
+ <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
233
302
  <i className="icon-adjust"></i>
234
303
  </button>
235
304
  </Dropdown>
@@ -249,14 +318,17 @@ class ReactDoc extends React.Component<IProps, IState> {
249
318
  <Route path="/react/autocomplete" component={AutocompleteDoc} />
250
319
  <Route path="/react/select" component={SelectsDoc} />
251
320
  <Route path="/react/select-with-template" component={SelectWithTemplateDocs} />
321
+ <Route path="/react/multiselect" component={MultiselectDocs} />
322
+ <Route path="/react/treeselect" component={TreeSelectDocs} />
252
323
  <Route path="/react/popover" component={PopoverDoc} />
253
324
  <Route path="/react/date-picker" component={DatePickerDoc} />
254
325
  <Route path="/react/time-picker" component={TimePickerDoc} />
255
326
  <Route path="/react/switch" component={SwitchDoc} />
256
- <Route path="/react/radio" component={RadiosDoc} />
327
+ <Route path="/react/radiogroup" component={RadioGroupDoc} />
257
328
  <Route path="/react/checkbox" component={CheckboxsDoc} />
258
329
  <Route path="/react/tab" component={TabsDoc} />
259
330
  <Route path="/react/left-navigation" component={LeftNavigationsDoc} />
331
+ <Route path="/react/Quick-navigation-bar" component={QuickNavBarDoc} />
260
332
  <Route path="/react/nav-buttons" component={NavButtonsDoc} />
261
333
  <Route path="/react/icon-font" component={IconFontDoc} />
262
334
  <Route path="/react/big-icon-font" component={BigIconFontDoc} />
@@ -272,6 +344,16 @@ class ReactDoc extends React.Component<IProps, IState> {
272
344
  <Route path="/react/content-divider" component={ContentDividerDoc} />
273
345
  <Route path="/react/menu" component={MenuDocs} />
274
346
  <Route path="/react/togglebox" component={ToggleboxDocs} />
347
+ <Route path="/react/list-items" component={ListItemsDoc} />
348
+ <Route path="/react/panel" component={PanelDoc} />
349
+ <Route path="/react/select-grid" component={SelectGridDocs} />
350
+ <Route path="/react/icon-picker" component={IconPickerDocs} />
351
+ <Route path="/react/simple-list" component={SimpleListDoc} />
352
+ <Route path="/react/boxed-list" component={BoxedListDoc} />
353
+ <Route path="/react/heading" component={HeadingDoc} />
354
+ <Route path="/react/text" component={TextDoc} />
355
+ <Route path="/react/container" component={ContainerDoc} />
356
+ <Route path="/react/dropzone" component={DropZoneDoc} />
275
357
  <Route path="/" component={ReactDefault} />
276
358
  </Switch>
277
359
  </main>
@@ -296,10 +378,9 @@ class ReactPlayground extends React.Component<IProps> {
296
378
 
297
379
  const parsePlayground = ({ match }, playgrounds) => {
298
380
  const Component = Playgrounds[playgrounds[match.params.id].component];
299
-
300
381
  return (
301
382
  <Component />
302
383
  );
303
384
  };
304
385
 
305
- export { ReactDoc, ReactPlayground };
386
+ export { ReactDoc, ReactPlayground };
@@ -9,6 +9,7 @@ interface IState {
9
9
  required: boolean;
10
10
  disabled: boolean;
11
11
  invalid: boolean;
12
+ value: number;
12
13
  }
13
14
 
14
15
  export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,7 +19,8 @@ export default class InputsDoc extends React.Component<{}, IState> {
18
19
  inlineLabel: false,
19
20
  required: true,
20
21
  disabled: false,
21
- invalid: false
22
+ invalid: false,
23
+ value: null
22
24
  }
23
25
  }
24
26
 
@@ -45,15 +47,17 @@ export default class InputsDoc extends React.Component<{}, IState> {
45
47
 
46
48
  <div className='form__row'>
47
49
  <Input label='Input label'
48
- value='This is some value'
50
+ value={this.state.value}
49
51
  maxLength={30}
52
+ type='number'
50
53
  error='This is error message'
51
54
  info='This is some hint message'
52
55
  inlineLabel={this.state.inlineLabel}
53
56
  required={this.state.required}
54
57
  disabled={this.state.disabled}
55
58
  invalid={this.state.invalid}
56
- onChange={(value) => {}} />
59
+ tabindex={0}
60
+ onChange={(value) => this.setState({value: value})} />
57
61
  </div>
58
62
  </div>
59
63
 
@@ -75,6 +79,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
75
79
  <h3 className='docs-page__h3'>Props</h3>
76
80
  <PropsList>
77
81
  <Prop name='value' isRequired={false} type='string' default='/' description='Item value'/>
82
+ <Prop name='type' isRequired={false} type='text | number | password' default='text' description='Input type. Defaults to type text.'/>
78
83
  <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
79
84
  <Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
80
85
  <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
@@ -83,6 +88,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
83
88
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
84
89
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
85
90
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
91
+ <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
86
92
  </PropsList>
87
93
  </section>
88
94
  )
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
- import { LeftMenu, Prop, PropsList } from '../../../app-typescript';
3
+ import { Container, Heading, LeftMenu, Prop, PropsList, SimpleList, SimpleListItem } from '../../../app-typescript';
4
4
 
5
5
  export default class LeftNavigationsDoc extends React.Component<{}> {
6
6
  render() {
@@ -8,8 +8,20 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
8
8
  return (
9
9
  <section className="docs-page__container">
10
10
  <h2 className="docs-page__h2">Left navigation</h2>
11
- <p className="docs-page__paragraph">...</p>
12
11
 
12
+ <Markup.ReactMarkupCodePreview>{`
13
+ <LeftMenu
14
+ activeItemId='1'
15
+ groups={[
16
+ { label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
17
+ { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges'}]},
18
+ { label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
19
+ ]}
20
+ onSelect={() => false} />
21
+ `}
22
+ </Markup.ReactMarkupCodePreview>
23
+
24
+ <h3 className="docs-page__h3">Default</h3>
13
25
  <Markup.ReactMarkup>
14
26
  <Markup.ReactMarkupPreview>
15
27
  <div className='docs-page__content-row'>
@@ -20,23 +32,160 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
20
32
  <p className="sd-top-menu__header">Top menu</p>
21
33
  </div>
22
34
  </div>
23
- <LeftMenu ariaLabel={'Left navigation'} navClass={'docs-page__grid-page-example__side'} activeItemId='1'
24
- groups={[{ label: 'SYSTEM SETTINGS', items: [{ id: '1', label: 'General' }, { id: '2', label: 'Email settings' }, { id: '3', label: 'Spell checking' }] },
25
- { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges' }] },
26
- { label: 'CONTENT CONFIG', items: [{ id: '6', label: 'Image renditions' }, { id: '7', label: 'Controlled Vocabularies' }] }]}
35
+ <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1'
36
+ groups={[
37
+ {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
38
+ {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
39
+ {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
40
+ ]}
27
41
  onSelect={() => false} />
28
42
  <div className='docs-page__grid-page-example__main'></div>
29
43
  </div>
30
44
  </div>
31
45
  </Markup.ReactMarkupPreview>
32
46
  <Markup.ReactMarkupCode>{`
33
- <LeftMenu ariaLabel={'Left navigation'} navClass={'some-optional-class'} activeItemId='1' groups={[{ label: 'SYSTEM SETTINGS', items: [{ id: '1', label: 'General' }, { id: '2', label: 'Email settings' }, { id: '3', label: 'Spell checking' }] },
34
- { label: 'WORKFLOW', items: [{ id: '4', label: 'Desk' }, { id: '5', label: 'User Roles & Privileges' }] },
35
- { label: 'CONTENT CONFIG', items: [{ id: '6', label: 'Image renditions' }, { id: '7', label: 'Controlled Vocabularies' }] }]}
47
+ <LeftMenu ariaLabel={'Left navigation'} className={'docs-page__grid-page-example__side'} activeItemId='1'
48
+ groups={[
49
+ {label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
50
+ {label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
51
+ {label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
52
+ ]}
36
53
  onSelect={() => false} />
37
54
  `}
38
55
  </Markup.ReactMarkupCode>
39
56
  </Markup.ReactMarkup>
57
+ <h3 className="docs-page__h3">With scrollspy</h3>
58
+ <p className="docs-page__paragraph">The component also supports the scrollspy variant. It is necessary to add ID value to items and add the ID value of scrollable container in the <code>scrollSpy</code> attribute.</p>
59
+ <Markup.ReactMarkup>
60
+ <Markup.ReactMarkupPreview>
61
+ <div className='docs-page__content-row'>
62
+ <div className='docs-page__grid-page-example'>
63
+ <div className='docs-page__grid-page-example__top'>
64
+ <div className="sd-top-menu">
65
+ <a className="sd-top-menu__collapse-nav"><i className="icon-collapse icon--white"></i></a>
66
+ <p className="sd-top-menu__header">Top menu</p>
67
+ </div>
68
+ </div>
69
+ <LeftMenu ariaLabel={'Left navigation'}
70
+ className={'docs-page__grid-page-example__side'}
71
+ scrollSpy='#scrollContainer'
72
+ offset={-300}
73
+ activeItemId='1'
74
+ groups={[
75
+ { label: 'MAIN SECTIONS', items: [
76
+ { id: '1', label: 'Section 1', ref:'section1'},
77
+ { id: '2', label: 'Section 2', ref: 'section2' },
78
+ { id: '3', label: 'Section 3', ref: 'section3' },
79
+
80
+ ]},
81
+ { label:'OTHER SECTIONS', items: [
82
+ { id: '4', label: 'Section 4', ref: 'section4' },
83
+ { id: '5', label: 'Section 5', ref: 'section5' }
84
+ ]},
85
+ { label:'OTHER SECTIONS', items: [
86
+ { id: '6', label: 'Section 6', ref: 'section6' },
87
+ { id: '7', label: 'Section 7', ref: 'section7' }
88
+ ]}
89
+ ]}
90
+ onSelect={() => false} />
91
+ <div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
92
+ <SimpleList density='comfortable'>
93
+ <SimpleListItem stacked={true} id='section1' >
94
+ <Heading type='h3'>Section 1</Heading>
95
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
96
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
97
+ </Container>
98
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
99
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
100
+ </Container>
101
+ </SimpleListItem >
102
+ <SimpleListItem stacked={true} id='section2' >
103
+ <Heading type='h3'>Section 2</Heading>
104
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
105
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
106
+ </Container>
107
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
108
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
109
+ </Container>
110
+ </SimpleListItem>
111
+ <SimpleListItem stacked={true} id='section3' >
112
+ <Heading type='h3'>Section 3</Heading>
113
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
114
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
115
+ </Container>
116
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
117
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
118
+ </Container>
119
+ </SimpleListItem>
120
+ <SimpleListItem stacked={true} id='section4' >
121
+ <Heading type='h3'>Section 4</Heading>
122
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
123
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
124
+ </Container>
125
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
126
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
127
+ </Container>
128
+ </SimpleListItem>
129
+ <SimpleListItem stacked={true} id='section5' >
130
+ <Heading type='h3'>Section 5</Heading>
131
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
132
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
133
+ </Container>
134
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
135
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
136
+ </Container>
137
+ </SimpleListItem>
138
+ <SimpleListItem stacked={true} id='section6' >
139
+ <Heading type='h3'>Section 6</Heading>
140
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
141
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
142
+ </Container>
143
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
144
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
145
+ </Container>
146
+ </SimpleListItem>
147
+ <SimpleListItem stacked={true} id='section7' >
148
+ <Heading type='h3'>Section 7</Heading>
149
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
150
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
151
+ </Container>
152
+ <Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--5'>
153
+ <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus ab porro nihil facilis beatae amet labore laudantium repellat enim non sunt aspernatur magni consequuntur tempore, aperiam qui doloremque perspiciatis tenetur.</p>
154
+ </Container>
155
+ </SimpleListItem>
156
+ </SimpleList>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </Markup.ReactMarkupPreview>
161
+ <Markup.ReactMarkupCode>
162
+ {`
163
+ <LeftMenu ariaLabel={'Left navigation'}
164
+ className={'docs-page__grid-page-example__side'}
165
+ scrollSpy='#scrollContainer'
166
+ activeItemId='1'
167
+ groups={[
168
+ { label: 'MAIN SECTIONS', items: [
169
+ { id: '1', label: 'Section 1', ref:'section1'},
170
+ { id: '2', label: 'Section 2', ref: 'section2' },
171
+ { id: '3', label: 'Section 3', ref: 'section3' },
172
+
173
+ ]},
174
+ {label:'OTHER SECTIONS', items: [
175
+ { id: '4', label: 'Section 4', ref: 'section4' },
176
+ { id: '5', label: 'Section 5', ref: 'section5' }
177
+ ]},
178
+ {label:'OTHER SECTIONS', items: [
179
+ { id: '4', label: 'Section 6', ref: 'section6' },
180
+ { id: '5', label: 'Section 7', ref: 'section7' }
181
+ ]}
182
+ ]}
183
+ onSelect={() => false} />
184
+
185
+ <div id='#scrollContainer'>...</div>
186
+ `}
187
+ </Markup.ReactMarkupCode>
188
+ </Markup.ReactMarkup>
40
189
 
41
190
  <h3 className="docs-page__h3">Props</h3>
42
191
  <PropsList>
@@ -46,7 +195,10 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
46
195
  <Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
47
196
  <Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
48
197
  <Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
198
+ <Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
199
+ <Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
49
200
  </PropsList>
201
+
50
202
  </section>
51
203
  )
52
204
  }
@@ -0,0 +1,34 @@
1
+ import * as React from "react";
2
+ import * as Markup from "../../js/react";
3
+ import { ListItemLoader, PropsList } from "../../../app-typescript";
4
+
5
+ export default class ListItemsDoc extends React.Component {
6
+ render() {
7
+ return (
8
+ <section className="docs-page__container">
9
+ <h2 className="docs-page__h2">ListItemLoader</h2>
10
+ <Markup.ReactMarkupCodePreview>{`
11
+ <ListItemLoader />
12
+ `}
13
+ </Markup.ReactMarkupCodePreview>
14
+ <h3 className="docs-page__h3 docs-page__h3--small-top-m">Skeleton type loader for list items.</h3>
15
+ {/* <p className="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p> */}
16
+ <Markup.ReactMarkup>
17
+ <Markup.ReactMarkupPreview>
18
+ <div className="docs-page__content-row">
19
+ <ListItemLoader />
20
+ </div>
21
+ </Markup.ReactMarkupPreview>
22
+ <Markup.ReactMarkupCode>{`
23
+ <ListItemLoader />
24
+ `}</Markup.ReactMarkupCode>
25
+ </Markup.ReactMarkup>
26
+
27
+ <h3 className="docs-page__h3">Props</h3>
28
+ <PropsList>
29
+
30
+ </PropsList>
31
+ </section>
32
+ )
33
+ }
34
+ }
@@ -27,19 +27,19 @@ export default class ModalDoc extends React.Component<{}, IState> {
27
27
 
28
28
  render() {
29
29
  const modalFullFooter=(
30
- <ButtonGroup align="right">
30
+ <ButtonGroup align="end">
31
31
  <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
32
32
  <Button type='primary' text='Save' onClick={() => {}}/>
33
33
  </ButtonGroup>
34
34
  );
35
35
  const modalLargeFooter=(
36
- <ButtonGroup align="right">
36
+ <ButtonGroup align="end">
37
37
  <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
38
38
  <Button type='primary' text='Save' onClick={() => {}}/>
39
39
  </ButtonGroup>
40
40
  );
41
41
  const modalXLargeFooter=(
42
- <ButtonGroup align="right">
42
+ <ButtonGroup align="end">
43
43
  <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
44
44
  <Button type='primary' text='Save' onClick={() => {}}/>
45
45
  </ButtonGroup>
@@ -60,7 +60,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
60
60
  </p>
61
61
  <Markup.ReactMarkup>
62
62
  <Markup.ReactMarkupPreview>
63
- <ButtonGroup align="right">
63
+ <ButtonGroup align="end">
64
64
  <Button text="Basic (no size)" onClick={() => this.setState({modalBasic: true})} />
65
65
  <Button text="Small" onClick={() => this.setState({modalSmall: true})} />
66
66
  <Button text="Medium" onClick={() => this.setState({modalMedium: true})} />
@@ -144,7 +144,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
144
144
  // Large
145
145
  <Button text="Large with footer" onClick={() => this.setState({modalLarge: true})} />
146
146
  const modalLargeFooter=(
147
- <ButtonGroup align="right">
147
+ <ButtonGroup align="end">
148
148
  <Button text='Cancel' onClick={() => {this.setState({modalLarge:false})}}/>
149
149
  <Button type='primary' text='Save' onClick={() => {}}/>
150
150
  </ButtonGroup>
@@ -159,7 +159,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
159
159
  // Extra large
160
160
  <Button text="Extra Large with footer" onClick={() => this.setState({modalXLarge: true})} />
161
161
  const modalXLargeFooter=(
162
- <ButtonGroup align="right">
162
+ <ButtonGroup align="end">
163
163
  <Button text='Cancel' onClick={() => {this.setState({modalXLarge:false})}}/>
164
164
  <Button type='primary' text='Save' onClick={() => {}}/>
165
165
  </ButtonGroup>
@@ -203,7 +203,7 @@ export default class ModalDoc extends React.Component<{}, IState> {
203
203
  <Markup.ReactMarkupCode>{`
204
204
  <Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
205
205
  const modalFullFooter=(
206
- <ButtonGroup align="right">
206
+ <ButtonGroup align="end">
207
207
  <Button text='Cancel' onClick={() => {this.setState({modalFull:false})}}/>
208
208
  <Button type='primary' text='Save' onClick={() => {}}/>
209
209
  </ButtonGroup>