superdesk-ui-framework 2.4.20 → 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 (443) 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 +2 -1
  7. package/app/scripts/modals.js +1 -0
  8. package/app/styles/_accessibility.scss +305 -3
  9. package/app/styles/_alerts.scss +227 -97
  10. package/app/styles/_avatar.scss +60 -33
  11. package/app/styles/_badge.scss +55 -26
  12. package/app/styles/_big-icon-font.scss +2 -1
  13. package/app/styles/_boxed-list.scss +41 -20
  14. package/app/styles/_buttons.scss +544 -1026
  15. package/app/styles/_carousel.scss +19 -13
  16. package/app/styles/_content-divider.scss +125 -0
  17. package/app/styles/_design-tokens.scss +2 -0
  18. package/app/styles/_drag-drop.scss +1 -1
  19. package/app/styles/_empty-states.scss +9 -1
  20. package/app/styles/_helpers.scss +650 -308
  21. package/app/styles/_icon-font.scss +5 -5
  22. package/app/styles/_icon-labels.scss +6 -7
  23. package/app/styles/_labels.scss +65 -52
  24. package/app/styles/_loaders.scss +28 -0
  25. package/app/styles/_master-desk.scss +11 -11
  26. package/app/styles/_mixins.scss +21 -13
  27. package/app/styles/_modals.scss +103 -116
  28. package/app/styles/_normalize.scss +1 -0
  29. package/app/styles/_panel-info.scss +21 -16
  30. package/app/styles/_popover.scss +2 -2
  31. package/app/styles/_pr-superdesk-theme.scss +4 -0
  32. package/app/styles/_publisher-styles.scss +182 -0
  33. package/app/styles/_reboot.scss +1 -0
  34. package/app/styles/_sd-tag-input.scss +184 -97
  35. package/app/styles/_simple-list.scss +41 -19
  36. package/app/styles/_tables.scss +5 -4
  37. package/app/styles/_tabs.scss +24 -75
  38. package/app/styles/_tag-labels.scss +47 -47
  39. package/app/styles/_thumb-carousel.scss +11 -10
  40. package/app/styles/_toggle-box.scss +52 -46
  41. package/app/styles/_toggle-button.scss +42 -0
  42. package/app/styles/_tooltips.scss +55 -98
  43. package/app/styles/_variables.scss +0 -1
  44. package/app/styles/app.scss +16 -1
  45. package/app/styles/components/_card-item.scss +41 -28
  46. package/app/styles/components/_list-item.scss +24 -94
  47. package/app/styles/components/_sd-circular-progress.scss +1 -1
  48. package/app/styles/components/_sd-collapse-box.scss +6 -33
  49. package/app/styles/components/_sd-comment-box.scss +1 -1
  50. package/app/styles/components/_sd-dropzone.scss +78 -0
  51. package/app/styles/components/_sd-grid-item.scss +78 -180
  52. package/app/styles/components/_sd-loader.scss +1 -16
  53. package/app/styles/components/_sd-media-carousel.scss +10 -12
  54. package/app/styles/components/_sd-photo-preview.scss +13 -13
  55. package/app/styles/components/_sd-searchbar.scss +43 -127
  56. package/app/styles/components/_sd-toaster.scss +13 -6
  57. package/app/styles/components/_subnav.scss +111 -117
  58. package/app/styles/components/_theme-selector.scss +189 -0
  59. package/app/styles/components/sd-slider.scss +11 -11
  60. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  61. package/app/styles/design-tokens/_new-colors.scss +700 -0
  62. package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
  63. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  64. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  65. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  66. package/app/styles/editor/_editor-buttons.scss +54 -0
  67. package/app/styles/editor/_editor-themes.scss +437 -0
  68. package/app/styles/form-elements/_autocomplete.scss +12 -41
  69. package/app/styles/form-elements/_checkbox.scss +180 -245
  70. package/app/styles/form-elements/_forms-general.scss +92 -20
  71. package/app/styles/form-elements/_inputs.scss +96 -350
  72. package/app/styles/form-elements/_radio.scss +6 -6
  73. package/app/styles/form-elements/_select-grid.scss +16 -14
  74. package/app/styles/form-elements/_switch.scss +26 -47
  75. package/app/styles/grids/_basic-grid.scss +52 -26
  76. package/app/styles/grids/_grid-layout.scss +93 -58
  77. package/app/styles/grids/_layout-grid.scss +6 -6
  78. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  79. package/app/styles/interface-elements/_side-panel.scss +115 -83
  80. package/app/styles/layout/_basic-layout.scss +11 -19
  81. package/app/styles/layout/_container.scss +32 -0
  82. package/app/styles/layout/_editor.scss +306 -0
  83. package/app/styles/layout/_general.scss +4 -5
  84. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  85. package/app/styles/menus/_sd-left-navigation.scss +34 -18
  86. package/app/styles/menus/_sd-sidebar-menu.scss +117 -25
  87. package/app/styles/menus/_sd-top-menu.scss +3 -3
  88. package/app/styles/primereact/_pr-datepicker.scss +60 -9
  89. package/app/styles/primereact/_pr-dialog.scss +99 -30
  90. package/app/styles/primereact/_pr-dropdown.scss +177 -19
  91. package/app/styles/primereact/_pr-general.scss +14 -7
  92. package/app/styles/primereact/_pr-menu.scss +9 -12
  93. package/app/styles/variables/_colors.scss +124 -516
  94. package/app/styles/variables/_dimensions.scss +82 -4
  95. package/app/styles/variables/_form-elements.scss +0 -2
  96. package/app/styles/variables/_typography.scss +2 -0
  97. package/app-typescript/components/Alert.tsx +16 -1
  98. package/app-typescript/components/Avatar.tsx +21 -0
  99. package/app-typescript/components/ButtonGroup.tsx +9 -5
  100. package/app-typescript/components/Carousel.tsx +1 -1
  101. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  102. package/app-typescript/components/CheckGroup.tsx +2 -1
  103. package/app-typescript/components/Checkbox.tsx +7 -3
  104. package/app-typescript/components/CheckboxButton.tsx +9 -2
  105. package/app-typescript/components/ContentDivider.tsx +34 -0
  106. package/app-typescript/components/DatePicker.tsx +6 -2
  107. package/app-typescript/components/DropZone.tsx +89 -0
  108. package/app-typescript/components/Dropdown.tsx +30 -11
  109. package/app-typescript/components/DropdownFirst.tsx +1 -1
  110. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  111. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  112. package/app-typescript/components/Form/FormItem.tsx +20 -0
  113. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  114. package/app-typescript/components/Form/FormRow.tsx +40 -0
  115. package/app-typescript/components/Form/FormText.tsx +15 -0
  116. package/app-typescript/components/Form/index.tsx +5 -0
  117. package/app-typescript/components/IconButton.tsx +26 -12
  118. package/app-typescript/components/Input.tsx +38 -20
  119. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  120. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  121. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  122. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  123. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  124. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  125. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  126. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  127. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  128. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  129. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  131. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  132. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  134. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  135. package/app-typescript/components/Layouts/Container.tsx +30 -0
  136. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  137. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  138. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  139. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  140. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  141. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  142. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  143. package/app-typescript/components/Layouts/index.tsx +25 -0
  144. package/app-typescript/components/LeftMenu.tsx +123 -49
  145. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  146. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  147. package/app-typescript/components/Lists/index.tsx +2 -0
  148. package/app-typescript/components/Modal.tsx +7 -2
  149. package/app-typescript/components/MultiSelect.tsx +69 -0
  150. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  151. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  152. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  153. package/app-typescript/components/Navigation/index.tsx +3 -0
  154. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  155. package/app-typescript/components/RadioGroup.tsx +69 -0
  156. package/app-typescript/components/Select.tsx +7 -9
  157. package/app-typescript/components/SelectGrid.tsx +3 -3
  158. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  159. package/app-typescript/components/Spinner.tsx +0 -1
  160. package/app-typescript/components/SubNav.tsx +25 -4
  161. package/app-typescript/components/Switch.tsx +34 -12
  162. package/app-typescript/components/TabCustom.tsx +40 -89
  163. package/app-typescript/components/TabList.tsx +18 -43
  164. package/app-typescript/components/Tag.tsx +31 -8
  165. package/app-typescript/components/Text/Heading.tsx +67 -0
  166. package/app-typescript/components/Text/Text.tsx +36 -0
  167. package/app-typescript/components/ThemeSelector.tsx +113 -0
  168. package/app-typescript/components/TimePicker.tsx +3 -3
  169. package/app-typescript/components/Togglebox.tsx +8 -6
  170. package/app-typescript/components/TreeSelect.tsx +330 -0
  171. package/app-typescript/index.ts +16 -4
  172. package/dist/avatar-2.jpg +0 -0
  173. package/dist/avatar-3.jpg +0 -0
  174. package/dist/avatar-4.jpg +0 -0
  175. package/dist/avatar-5.jpg +0 -0
  176. package/dist/avatar-6.jpg +0 -0
  177. package/dist/avatar_64.png +0 -0
  178. package/dist/components/basic-grid.html +1 -1
  179. package/dist/components/checkbox.html +1 -1
  180. package/dist/examples.bundle.css +1933 -2393
  181. package/dist/examples.bundle.js +23583 -15736
  182. package/dist/index.html +9 -12
  183. package/dist/playgrounds/boxed-list.html +1 -1
  184. package/dist/playgrounds/cards.html +9 -4
  185. package/dist/playgrounds/editor-3-test.html +15 -0
  186. package/dist/playgrounds/form-layout.html +9 -7
  187. package/dist/playgrounds/layout-test-2.html +40 -36
  188. package/dist/playgrounds/list-item-test.html +1 -1
  189. package/dist/playgrounds/master-desk.html +1 -3
  190. package/dist/playgrounds/photo-desk.html +33 -33
  191. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  192. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  193. package/dist/playgrounds/react-playgrounds/Index.tsx +5 -1
  194. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  195. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  196. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  197. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  198. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  199. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  200. package/dist/playgrounds/tags-input.html +1 -1
  201. package/dist/react/Alerts.tsx +123 -23
  202. package/dist/react/Avatar.tsx +314 -127
  203. package/dist/react/BoxedList.tsx +362 -0
  204. package/dist/react/ButtonGroups.tsx +66 -65
  205. package/dist/react/Buttons.tsx +62 -247
  206. package/dist/react/Carousel.tsx +2 -3
  207. package/dist/react/Checkboxs.tsx +66 -25
  208. package/dist/react/Container.tsx +143 -0
  209. package/dist/react/ContentDivider.tsx +178 -0
  210. package/dist/react/DropZone.tsx +103 -0
  211. package/dist/react/Heading.tsx +106 -0
  212. package/dist/react/IconButtons.tsx +49 -42
  213. package/dist/react/Index.tsx +118 -11
  214. package/dist/react/Inputs.tsx +9 -24
  215. package/dist/react/LeftNavigations.tsx +161 -9
  216. package/dist/react/ListItems.tsx +3 -3
  217. package/dist/react/Modal.tsx +173 -19
  218. package/dist/react/MultiSelect.tsx +193 -0
  219. package/dist/react/NavButtons.tsx +4 -4
  220. package/dist/react/Panel.tsx +366 -0
  221. package/dist/react/QuickNavigationBar.tsx +142 -0
  222. package/dist/react/RadioGroup.tsx +351 -0
  223. package/dist/react/SelectWithTemplate.tsx +1 -1
  224. package/dist/react/Selects.tsx +3 -23
  225. package/dist/react/SimpleList.tsx +148 -0
  226. package/dist/react/SubNav.tsx +69 -20
  227. package/dist/react/Tabs.tsx +72 -248
  228. package/dist/react/Tags.tsx +45 -4
  229. package/dist/react/Text.tsx +134 -0
  230. package/dist/react/Tooltips.tsx +1 -1
  231. package/dist/react/TreeSelect.tsx +178 -0
  232. package/dist/react.html +4 -0
  233. package/dist/superdesk-ui.bundle.css +28522 -23998
  234. package/dist/superdesk-ui.bundle.js +7546 -3667
  235. package/dist/vendor.bundle.js +64 -68
  236. package/examples/css/docs-page.css +205 -46
  237. package/examples/img/avatar-2.jpg +0 -0
  238. package/examples/img/avatar-3.jpg +0 -0
  239. package/examples/img/avatar-4.jpg +0 -0
  240. package/examples/img/avatar-5.jpg +0 -0
  241. package/examples/img/avatar-6.jpg +0 -0
  242. package/examples/index.html +9 -12
  243. package/examples/index.js +20 -0
  244. package/examples/pages/components/basic-grid.html +1 -1
  245. package/examples/pages/components/checkbox.html +1 -1
  246. package/examples/pages/playgrounds/boxed-list.html +1 -1
  247. package/examples/pages/playgrounds/cards.html +9 -4
  248. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  249. package/examples/pages/playgrounds/form-layout.html +9 -7
  250. package/examples/pages/playgrounds/layout-test-2.html +40 -36
  251. package/examples/pages/playgrounds/list-item-test.html +1 -1
  252. package/examples/pages/playgrounds/master-desk.html +1 -3
  253. package/examples/pages/playgrounds/photo-desk.html +33 -33
  254. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  255. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  256. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +5 -1
  257. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  258. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  259. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  260. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  261. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  262. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  263. package/examples/pages/playgrounds/tags-input.html +1 -1
  264. package/examples/pages/react/Alerts.tsx +123 -23
  265. package/examples/pages/react/Avatar.tsx +314 -127
  266. package/examples/pages/react/BoxedList.tsx +362 -0
  267. package/examples/pages/react/ButtonGroups.tsx +66 -65
  268. package/examples/pages/react/Buttons.tsx +62 -247
  269. package/examples/pages/react/Carousel.tsx +2 -3
  270. package/examples/pages/react/Checkboxs.tsx +66 -25
  271. package/examples/pages/react/Container.tsx +143 -0
  272. package/examples/pages/react/ContentDivider.tsx +178 -0
  273. package/examples/pages/react/DropZone.tsx +103 -0
  274. package/examples/pages/react/Heading.tsx +106 -0
  275. package/examples/pages/react/IconButtons.tsx +49 -42
  276. package/examples/pages/react/Index.tsx +118 -11
  277. package/examples/pages/react/Inputs.tsx +9 -24
  278. package/examples/pages/react/LeftNavigations.tsx +161 -9
  279. package/examples/pages/react/ListItems.tsx +3 -3
  280. package/examples/pages/react/Modal.tsx +173 -19
  281. package/examples/pages/react/MultiSelect.tsx +193 -0
  282. package/examples/pages/react/NavButtons.tsx +4 -4
  283. package/examples/pages/react/Panel.tsx +366 -0
  284. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  285. package/examples/pages/react/RadioGroup.tsx +351 -0
  286. package/examples/pages/react/SelectWithTemplate.tsx +1 -1
  287. package/examples/pages/react/Selects.tsx +3 -23
  288. package/examples/pages/react/SimpleList.tsx +148 -0
  289. package/examples/pages/react/SubNav.tsx +69 -20
  290. package/examples/pages/react/Tabs.tsx +72 -248
  291. package/examples/pages/react/Tags.tsx +45 -4
  292. package/examples/pages/react/Text.tsx +134 -0
  293. package/examples/pages/react/Tooltips.tsx +1 -1
  294. package/examples/pages/react/TreeSelect.tsx +178 -0
  295. package/examples/pages/react.html +4 -0
  296. package/images/avatar_64.png +0 -0
  297. package/package.json +10 -6
  298. package/react/components/Alert.d.ts +3 -0
  299. package/react/components/Alert.js +9 -1
  300. package/react/components/Avatar.d.ts +9 -0
  301. package/react/components/Avatar.js +19 -1
  302. package/react/components/ButtonGroup.d.ts +4 -2
  303. package/react/components/ButtonGroup.js +5 -3
  304. package/react/components/Carousel.js +1 -1
  305. package/react/components/CheckButtonGroup.d.ts +3 -1
  306. package/react/components/CheckButtonGroup.js +8 -2
  307. package/react/components/CheckGroup.d.ts +1 -0
  308. package/react/components/CheckGroup.js +1 -1
  309. package/react/components/Checkbox.d.ts +2 -1
  310. package/react/components/Checkbox.js +2 -2
  311. package/react/components/CheckboxButton.d.ts +1 -0
  312. package/react/components/CheckboxButton.js +2 -2
  313. package/react/components/ContentDivider.d.ts +12 -0
  314. package/react/components/ContentDivider.js +66 -0
  315. package/react/components/DatePicker.js +7 -2
  316. package/react/components/DropZone.d.ts +25 -0
  317. package/react/components/DropZone.js +93 -0
  318. package/react/components/Dropdown.d.ts +1 -0
  319. package/react/components/Dropdown.js +28 -23
  320. package/react/components/DropdownFirst.js +1 -1
  321. package/react/components/Form/FormGroup.d.ts +13 -0
  322. package/react/components/Form/FormGroup.js +61 -0
  323. package/react/components/Form/FormItem.d.ts +9 -0
  324. package/react/components/Form/FormItem.js +54 -0
  325. package/react/components/Form/FormLabel.d.ts +10 -0
  326. package/react/components/Form/FormLabel.js +54 -0
  327. package/react/components/Form/FormRow.d.ts +17 -0
  328. package/react/components/Form/FormRow.js +62 -0
  329. package/react/components/Form/FormText.d.ts +8 -0
  330. package/react/components/Form/FormText.js +47 -0
  331. package/react/components/Form/index.d.ts +5 -0
  332. package/react/components/Form/index.js +12 -0
  333. package/react/components/IconButton.d.ts +9 -2
  334. package/react/components/IconButton.js +13 -5
  335. package/react/components/Input.d.ts +20 -6
  336. package/react/components/Input.js +10 -13
  337. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  338. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  339. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  340. package/react/components/Layouts/AuthoringFrame.js +56 -0
  341. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  342. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  343. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  344. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  345. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  346. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  347. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  348. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  349. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  350. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  351. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  352. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  353. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  354. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  355. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  356. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  357. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  358. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  359. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  360. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  361. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  362. package/react/components/Layouts/AuthoringMain.js +53 -0
  363. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  364. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  365. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  366. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  367. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  368. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  369. package/react/components/Layouts/Container.d.ts +14 -0
  370. package/react/components/Layouts/Container.js +60 -0
  371. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  372. package/react/components/Layouts/HeaderPanel.js +47 -0
  373. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  374. package/react/components/Layouts/LayoutContainer.js +47 -0
  375. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  376. package/react/components/Layouts/LeftPanel.js +54 -0
  377. package/react/components/Layouts/MainPanel.d.ts +10 -0
  378. package/react/components/Layouts/MainPanel.js +50 -0
  379. package/react/components/Layouts/PageLayout.d.ts +16 -0
  380. package/react/components/Layouts/PageLayout.js +64 -0
  381. package/react/components/Layouts/Panel.d.ts +65 -0
  382. package/react/components/Layouts/Panel.js +166 -0
  383. package/react/components/Layouts/RightPanel.d.ts +9 -0
  384. package/react/components/Layouts/RightPanel.js +47 -0
  385. package/react/components/Layouts/index.d.ts +24 -0
  386. package/react/components/Layouts/index.js +55 -0
  387. package/react/components/LeftMenu.d.ts +8 -3
  388. package/react/components/LeftMenu.js +55 -16
  389. package/react/components/Lists/BoxedList.d.ts +36 -0
  390. package/react/components/Lists/BoxedList.js +137 -0
  391. package/react/components/Lists/SimpleList.d.ts +21 -0
  392. package/react/components/Lists/SimpleList.js +78 -0
  393. package/react/components/Lists/index.d.ts +2 -0
  394. package/react/components/Lists/index.js +9 -0
  395. package/react/components/Modal.d.ts +3 -1
  396. package/react/components/Modal.js +3 -2
  397. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  398. package/react/components/Navigation/QuickNavBar.js +113 -0
  399. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  400. package/react/components/Navigation/SideBarMenu.js +77 -0
  401. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  402. package/react/components/Navigation/SideBarTabs.js +82 -0
  403. package/react/components/Navigation/index.d.ts +3 -0
  404. package/react/components/Navigation/index.js +8 -0
  405. package/react/components/RadioButtonGroup.d.ts +29 -0
  406. package/react/components/RadioButtonGroup.js +89 -0
  407. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  408. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  409. package/react/components/Select.d.ts +1 -1
  410. package/react/components/Select.js +2 -9
  411. package/react/components/SelectGrid.js +3 -3
  412. package/react/components/SlidingToolbar.d.ts +1 -1
  413. package/react/components/SlidingToolbar.js +11 -1
  414. package/react/components/Spinner.d.ts +0 -1
  415. package/react/components/Spinner.js +0 -1
  416. package/react/components/SubNav.d.ts +8 -1
  417. package/react/components/SubNav.js +22 -4
  418. package/react/components/Switch.d.ts +4 -1
  419. package/react/components/Switch.js +19 -7
  420. package/react/components/TabCustom.d.ts +11 -22
  421. package/react/components/TabCustom.js +23 -52
  422. package/react/components/TabList.d.ts +2 -11
  423. package/react/components/TabList.js +11 -32
  424. package/react/components/Tag.d.ts +3 -3
  425. package/react/components/Tag.js +16 -5
  426. package/react/components/TagInput.d.ts +0 -1
  427. package/react/components/Text/Heading.d.ts +15 -0
  428. package/react/components/Text/Heading.js +77 -0
  429. package/react/components/Text/Text.d.ts +15 -0
  430. package/react/components/Text/Text.js +65 -0
  431. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  432. package/react/components/ThemeSelector.js +112 -0
  433. package/react/components/TimePicker.js +2 -2
  434. package/react/components/Togglebox.d.ts +1 -0
  435. package/react/components/Togglebox.js +9 -2
  436. package/react/index.d.ts +15 -4
  437. package/react/index.js +36 -6
  438. package/app/styles/_editor-themes.scss +0 -326
  439. package/app/styles/variables/_design-tokens-general.scss +0 -76
  440. package/app-typescript/components/Radio.tsx +0 -57
  441. package/app-typescript/components/RadioButton.tsx +0 -57
  442. package/dist/react/Radios.tsx +0 -391
  443. package/examples/pages/react/Radios.tsx +0 -391
@@ -1,12 +1,90 @@
1
1
  $zindexDropdown: 1000;
2
2
  $zindexFixedNavbar: 1030;
3
+ $sd-main-menu-width: 30rem;
3
4
 
4
- $nav-height: 4.8rem;
5
- $subnav-height: 4.8rem;
5
+ $sd-base-increment: 0.8rem;
6
+
7
+ // Border Radius
8
+ $border-radius__base--x-small: var(--b-radius--x-small);
9
+ $border-radius__base--small: var(--b-radius--small);
10
+ $border-radius__base--medium: var(--b-radius--medium);
11
+ $border-radius__base--large: var(--b-radius--large);
12
+ $border-radius__base--x-large: var(--b-radius--x-large);
13
+ $border-radius__base--full: var(--b-radius--full);
14
+
15
+ // TYPOGRAPHY
16
+ // ----------------------------------------------------
17
+ $font-size__base: 1.3rem;
18
+ $font-size__base--: 1.3rem;
19
+
20
+ $font-size__button--default: 1.2rem;
21
+ $font-size__button--small: 1rem;
22
+ $font-size__button--large: 1.4rem;
23
+
24
+ $font-size__heading--1: 1.4rem;
25
+
26
+ $font-size__editor_base: 1.6rem;
27
+ $font-size__editor_H1: 2em;
28
+ $font-size__editor_H2: 1.5em;
29
+ $font-size__editor_H3: 1.125em;
30
+ $font-size__editor_H4: 0.875em;
31
+ $font-size__editor_H5: 0.75em;
32
+ $font-size__editor_H6: 0.6875em;
33
+
34
+ // SHAPES & SIZES
35
+ // ----------------------------------------------------
6
36
 
7
37
  // left and right side-tab navigation width
38
+
8
39
  $sd-sidebarMenu-width: 4.8rem;
40
+ $nav-height: 4.8rem;
41
+ $subnav-height: 4.8rem;
9
42
 
10
- $sd-main-menu-width: 30rem;
43
+ // Heights
44
+ $height-input--default: $sd-base-increment * 4;
11
45
 
12
- $sd-base-increment: 0.8rem;
46
+ $height__button--default: $height-input--default;
47
+ $height__button--small: $sd-base-increment * 3;
48
+ $height__button--large: $sd-base-increment * 5;
49
+ $height__button--x-large: $sd-base-increment * 7;
50
+
51
+
52
+ $height__label--default: $sd-base-increment * 2;
53
+ $height__label--large: $sd-base-increment * 3;
54
+
55
+ $height__icon-button--default: $height-input--default;
56
+ $height__icon-button--small: $sd-base-increment * 3;
57
+
58
+ $height__modal-header: $sd-base-increment * 6;
59
+ $height__modal-footer: $sd-base-increment * 6;
60
+
61
+ // Spaces
62
+ $padding-x__button--default: 1.2rem !default;
63
+ $padding-x__button--small: 0.8rem;
64
+ $padding-x__button--large: 1.6rem;
65
+
66
+ $padding-x__label--default: 0.8rem;
67
+ $padding-y__label--large: 0.5rem;
68
+ $padding-x__label--large: 1.2rem;
69
+
70
+
71
+ // ELEVATIONS
72
+ // ----------------------------------------------------
73
+ $shadow__base--z1: 0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1);
74
+ $shadow__base--z2: 0 1px 4px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.1);
75
+ $shadow__base--z3: 0 1px 6px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.1);
76
+ $shadow__base--z4: 0 2px 10px rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
77
+
78
+ $shadow__dropdown--default: var(--sd-shadow__dropdown);
79
+ $shadow__modal--default: var(--sd-shadow__modal);
80
+
81
+
82
+ // TRANSITIONS
83
+ // ----------------------------------------------------
84
+ $sd-transition__menu-item: background-color ease 0.1s;
85
+
86
+
87
+ // FORM ELEMENTS
88
+ // ----------------------------------------------------
89
+ $form-label-height: $sd-base-increment * 2;
90
+ $form-input-height: $sd-base-increment * 4;
@@ -1,2 +0,0 @@
1
- $form-label-height: $sd-base-increment * 2;
2
- $form-input-height: $sd-base-increment * 4;
@@ -3,6 +3,8 @@
3
3
 
4
4
  $baseFontSize: 13px;
5
5
  $baseFontFamily: "Roboto", Helvetica, Arial, sans-serif;
6
+ $baseFontFamilyMono:'Roboto Mono', 'Consolas', 'monaco', monospace;
7
+ $baseFontFamilySerif: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
6
8
  $baseLineHeight: 140%;
7
9
  $altFontFamily: Georgia, "Times New Roman", Times, serif;
8
10
 
@@ -1,11 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import classNames from 'classnames';
3
+ import { Icon } from './Icon';
3
4
 
4
5
  interface IProps {
5
6
  type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
6
7
  style?: 'filled' | 'hollow'; // defaults to 'filled'
7
8
  size?: 'normal' | 'small'; // defaults to 'normal'
8
9
  restoreIcon?: 'info' | 'help'; // defaults to 'info'
10
+ icon?: string;
11
+ banner?: boolean;
12
+ margin?: 'none' | 'small' | 'normal' | 'large';
9
13
  }
10
14
 
11
15
  interface IState {
@@ -32,7 +36,11 @@ export class Alert extends React.PureComponent<IProps, IState> {
32
36
  'sd-alert--hollow': this.props.style === 'hollow',
33
37
  'sd-alert--small': this.props.size === 'small',
34
38
  [`sd-alert--${this.props.type}`]: this.props.type,
39
+ [`sd-alert--${this.props.type}`]: this.props.type,
40
+ 'sd-alert--margin-normal': this.props.margin === undefined,
41
+ [`sd-alert--margin-${this.props.margin}`]: this.props.margin,
35
42
  'sd-alert--hidden': !this.state.open,
43
+ 'sd-alert--banner-style': this.props.banner,
36
44
  });
37
45
  let classesInfoBtn = classNames('sd-alert__info-btn sd-shadow--z2', {
38
46
  [`sd-alert__info-btn--${this.props.type}`]: this.props.type,
@@ -42,9 +50,16 @@ export class Alert extends React.PureComponent<IProps, IState> {
42
50
  return (
43
51
  <div className='sd-alert__container'>
44
52
  <div className={classesAlert}>
53
+ {this.props.icon ?
54
+ <span className="sd-alert__icon">
55
+ <Icon name={this.props.icon} />
56
+ </span> : null
57
+ }
45
58
  {this.props.restoreIcon ?
46
59
  <button className='sd-alert__close' onClick={this.onToggle} aria-label="Close"></button> : null}
47
- {this.props.children}
60
+ <span className="sd-alert__content">
61
+ {this.props.children}
62
+ </span>
48
63
  </div>
49
64
  {this.props.restoreIcon ?
50
65
  <span className={classesInfoBtn} onClick={this.onToggle}>
@@ -39,6 +39,27 @@ export class AvatarContentImage extends React.PureComponent<IImageAvatar> {
39
39
  }
40
40
  }
41
41
  }
42
+ interface IPropsAvatarGroup {
43
+ appearance?: 'stacked' | 'grid';
44
+ borderColor?: '000' | '050' | '100' | '150' | '200';
45
+ className?: string;
46
+ children: React.ReactNode;
47
+ }
48
+ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
49
+ render() {
50
+ let classes = classNames('sd-avatar-group', {
51
+ [`sd-avatar-group--stacked`]: this.props.appearance === undefined,
52
+ [`sd-avatar-group--${this.props.appearance}`]: this.props.appearance,
53
+ [`sd-avatar-group__border--000`]: this.props.borderColor === undefined,
54
+ [`sd-avatar-group__border--${this.props.borderColor}`]: this.props.borderColor,
55
+ }, this.props.className);
56
+ return (
57
+ <div className={classes} role='group'>
58
+ {this.props.children}
59
+ </div>
60
+ );
61
+ }
62
+ }
42
63
 
43
64
  interface IPropsAvatarWrapper {
44
65
  size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'; // defaults to medium
@@ -3,20 +3,24 @@ import classNames from 'classnames';
3
3
 
4
4
  interface IProps {
5
5
  orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
6
- spaces?: 'comfort' | 'compact'; // defaults to 'comfort'
7
- align?: 'left' | 'right' | 'center' | 'inline'; // defaults to 'left'
6
+ spaces?: 'comfort' | 'compact' | 'loose' | 'no-space'; // defaults to 'comfort'
7
+ align?: 'start' | 'end' | 'center' | 'inline' | 'sub'; // defaults to 'left'
8
8
  padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
9
+ subgroup?: boolean; // for nested button groups§.
9
10
  children: React.ReactNode;
11
+ className?: string;
10
12
  }
11
13
  export class ButtonGroup extends React.PureComponent<IProps> {
12
14
  render() {
13
15
  let classes = classNames('button-group', {
14
- [`button-group--left`]: this.props.align === undefined && !this.props.orientation,
16
+ [`button-group--start`]: this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
15
17
  [`button-group--${this.props.align}`]: this.props.align && !this.props.orientation,
16
18
  [`button-group--vertical`]: this.props.orientation === 'vertical',
17
- [`button-group--compact`]: this.props.spaces === 'compact',
19
+ [`button-group--comfort`]: this.props.spaces === undefined,
20
+ [`button-group--${this.props.spaces}`]: this.props.spaces,
18
21
  [`button-group--padded`]: this.props.padded === true,
19
- });
22
+ [`button-group--sub-group`]: this.props.subgroup === true,
23
+ }, this.props.className);
20
24
  return (
21
25
  <div className={classes} role='group'>
22
26
  {this.props.children}
@@ -67,7 +67,7 @@ export class Carousel extends React.PureComponent<IProps, {}> {
67
67
  );
68
68
 
69
69
  return <div style={{display: 'content'}}
70
- data-theme={this.props.theme !== 'dark' ? '' : 'dark-ui' }
70
+ data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
71
71
  className={this.props.className}>
72
72
  <PrimeCarousel
73
73
  id={this.props.id}
@@ -1,27 +1,41 @@
1
1
  import * as React from 'react';
2
2
  import classNames from 'classnames';
3
+ import {FormLabel} from './Form/FormLabel';
3
4
 
4
5
  interface IProps {
5
6
  orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
6
7
  grid?: boolean;
7
- align?: 'left' | 'right' | 'center' | 'inline'; // defaults to 'left'
8
+ align?: 'start' | 'end' | 'center' | 'inline'; // defaults to 'left'
8
9
  padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
10
+ groupLabel?: string;
11
+ groupLabelledBy?: string;
9
12
  }
10
13
 
11
14
  export class CheckButtonGroup extends React.PureComponent<IProps> {
12
15
  render() {
13
16
  let classes = classNames('sd-check-button__group', {
14
17
  [`sd-check-button__group--${this.props.align}`]: this.props.align,
15
- [`sd-check-button__group--left`]: !this.props.grid && this.props.align === undefined,
18
+ [`sd-check-button__group--start`]: !this.props.grid && this.props.align === undefined,
16
19
  [`button-group--vertical`]: this.props.orientation === 'vertical',
17
20
  [`sd-check-button__group--grid`]: this.props.grid,
18
21
  [`sd-check-button__group--padded`]: this.props.padded === true,
19
22
  });
20
23
 
21
24
  return (
22
- <div className={classes}>
23
- {this.props.children}
24
- </div>
25
+ <>
26
+ {this.props.groupLabel ?
27
+ <div className='sd-check-button__group-wrapper' aria-labelledby={this.props.groupLabelledBy}>
28
+ <FormLabel forId={'group'} text={this.props.groupLabel} />
29
+ <div className={classes}>
30
+ {this.props.children}
31
+ </div>
32
+ </div>
33
+ :
34
+ <div className={classes}>
35
+ {this.props.children}
36
+ </div>
37
+ }
38
+ </>
25
39
  );
26
40
  }
27
41
  }
@@ -4,6 +4,7 @@ import classNames from 'classnames';
4
4
  interface IProps {
5
5
  orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
6
6
  children: React.ReactNode;
7
+ groupLabelledBy?: string;
7
8
  }
8
9
 
9
10
  export class CheckGroup extends React.PureComponent<IProps> {
@@ -13,7 +14,7 @@ export class CheckGroup extends React.PureComponent<IProps> {
13
14
  });
14
15
 
15
16
  return (
16
- <div className={classes}>
17
+ <div className={classes} aria-labelledby={this.props.groupLabelledBy}>
17
18
  {this.props.children}
18
19
  </div>
19
20
  );
@@ -3,12 +3,13 @@ import nextId from "react-id-generator";
3
3
  interface IProps {
4
4
  label: {
5
5
  text: string,
6
- side?: 'left' | 'right', // defaults to 'right'
6
+ side?: 'start' | 'end', // defaults to 'right'
7
7
  hidden?: boolean,
8
8
  };
9
9
  checked?: boolean;
10
10
  disabled?: boolean;
11
11
  required?: boolean;
12
+ tabindex?: number;
12
13
  onChange(nextValue: boolean): void;
13
14
  }
14
15
  export class Checkbox extends React.Component<IProps> {
@@ -27,8 +28,11 @@ export class Checkbox extends React.Component<IProps> {
27
28
 
28
29
  render() {
29
30
  return (
30
- <span className="sd-check-new__wrapper" label-position={this.props.label.side || null} tabIndex={-1}>
31
- <input type="checkbox" className="sd-check-new__input" id={this.htmlId} tabIndex={0}
31
+ <span className="sd-check-new__wrapper"
32
+ label-position={this.props.label.side || null}
33
+ tabIndex={this.props.tabindex === undefined ? undefined : -1}>
34
+ <input type="checkbox" className="sd-check-new__input" id={this.htmlId}
35
+ tabIndex={this.props.tabindex}
32
36
  checked={this.props.checked}
33
37
  onChange={this.handleChange}
34
38
  disabled={this.props.disabled}
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import nextId from "react-id-generator";
3
+
3
4
  interface IProps {
4
5
  label: {
5
6
  text: string,
@@ -9,8 +10,10 @@ interface IProps {
9
10
  checked?: boolean;
10
11
  disabled?: boolean;
11
12
  required?: boolean;
13
+ tabindex?: number;
12
14
  onChange(nextValue: boolean): void;
13
15
  }
16
+
14
17
  export class CheckboxButton extends React.Component<IProps> {
15
18
  htmlId = nextId();
16
19
 
@@ -27,8 +30,12 @@ export class CheckboxButton extends React.Component<IProps> {
27
30
 
28
31
  render() {
29
32
  return (
30
- <span className="sd-check-button sd-check-button--native" tabIndex={-1}>
31
- <input type="checkbox" className="sd-check-button__input" id={this.htmlId} tabIndex={0}
33
+ <span className="sd-check-button sd-check-button--native"
34
+ tabIndex={this.props.tabindex === undefined ? undefined : -1}>
35
+ <input type="checkbox"
36
+ className="sd-check-button__input"
37
+ id={this.htmlId}
38
+ tabIndex={this.props.tabindex}
32
39
  checked={this.props.checked}
33
40
  onChange={this.handleChange}
34
41
  disabled={this.props.disabled}
@@ -0,0 +1,34 @@
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+
4
+ interface IProps {
5
+ type?: 'dashed' |'dotted' | 'solid'; // defaults to 'solid'
6
+ orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
7
+ align?: 'center' | 'left' | 'right'; // defaults to 'center'
8
+ border?: boolean;
9
+ children?: React.ReactNode;
10
+ }
11
+
12
+ export class ContentDivider extends React.PureComponent<IProps> {
13
+
14
+ render() {
15
+ let classes = classNames('sd-content-divider', {
16
+ 'sd-content-divider--horizontal': this.props.orientation === undefined,
17
+ 'sd-content-divider--no-border': this.props.border === false,
18
+ [`sd-content-divider--${this.props.type}`]: this.props.type || this.props.type !== undefined,
19
+ [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
20
+ [`sd-content-divider--${this.props.orientation}`]:
21
+ this.props.orientation || this.props.orientation !== undefined,
22
+ });
23
+
24
+ if (this.props.children) {
25
+ return (
26
+ <div className={"sd-content-divider--with-text " + classes} role="separator">
27
+ <span className="sd-content-divider__inner-text">{this.props.children}</span>
28
+ </div>
29
+ );
30
+ } else {
31
+ return <div className={classes} role="separator"></div>;
32
+ }
33
+ }
34
+ }
@@ -175,8 +175,12 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
175
175
  )}
176
176
  appendTo={document.body} // making it work inside `overflow:hidden`
177
177
  disabled={this.props.disabled}
178
- onBlur={() => {
179
- if (this.state.valid === false) {
178
+ onBlur={(event) => {
179
+ // @ts-ignore: Object is possibly 'null'.
180
+ if (!event?.target.value) {
181
+ // @ts-ignore: Object is possibly 'null'.
182
+ this.setState({valid: true, value: null});
183
+ } else {
180
184
  // restoring internal state to current props value
181
185
  this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
182
186
  }
@@ -0,0 +1,89 @@
1
+ import * as React from 'react';
2
+ import classNames from 'classnames';
3
+ import { Icon } from './Icon';
4
+
5
+ interface IProps {
6
+ icon?: boolean;
7
+ text: string;
8
+ actionText: string;
9
+ heading?: string;
10
+ className?: string;
11
+ width?: 'auto' | 'full';
12
+ type?: 'default' | 'primary' | 'highlight' | 'darker';
13
+ state?: 'normal' | 'active'; // defaults to 'normal'
14
+ value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
15
+ // onClick(): void;
16
+ }
17
+
18
+ interface IState {
19
+ dragClass: boolean;
20
+ dropClass: boolean;
21
+ }
22
+
23
+ export class DropZone extends React.PureComponent<IProps, IState> {
24
+ constructor(props: IProps) {
25
+ super(props);
26
+ this.state = {
27
+ dragClass: false,
28
+ dropClass: false,
29
+ };
30
+
31
+ this.drop = this.drop.bind(this);
32
+ this.dragOver = this.dragOver.bind(this);
33
+ this.dragEnter = this.dragEnter.bind(this);
34
+ this.dragLeave = this.dragLeave.bind(this);
35
+ }
36
+
37
+ drop(event: any) {
38
+ event.preventDefault();
39
+ this.setState({dropClass: true, dragClass: false});
40
+ // var data = event.dataTransfer.getData("Text");
41
+ }
42
+
43
+ dragOver(event: any) {
44
+ event.preventDefault();
45
+ this.setState({dragClass: true});
46
+ }
47
+
48
+ dragEnter(event: any) {
49
+ event.preventDefault();
50
+ }
51
+
52
+ dragLeave(event: any) {
53
+ event.preventDefault();
54
+ this.setState({dragClass: false});
55
+ }
56
+
57
+ render() {
58
+ let classes = classNames('sd-dropzone__drop-target', {
59
+ 'sd-dropzone__drop-target--ondragover': this.state.dragClass,
60
+ 'sd-dropzone__drop-target--ondrop': this.state.dropClass,
61
+ [`sd-dropzone__drop-target--${this.props.type}`]: this.props.type,
62
+ }, this.props.className);
63
+
64
+ return (
65
+ <div className={classes}
66
+ onDragLeave={(event) => this.dragLeave(event)}
67
+ onDragEnter={(event) => this.dragEnter(event)}
68
+ onDragOver={(event) => this.dragOver(event)}
69
+ onDrop={(event) => this.drop(event)}
70
+ onDragStart={() => false}
71
+ onDragEnd={() => false}
72
+ >
73
+ <div className='sd-dropzone__target-border'>
74
+ <input type="file" className='sd-dropzone__input'/>
75
+ </div>
76
+ {this.props.icon ?
77
+ <figure className='sd-dropzone__icon' aria-hidden='true'>
78
+ <Icon name='upload-alt' size='big' />
79
+ </figure> : null
80
+ }
81
+ {this.props.heading ?
82
+ <h4 className='sd-dropzone__heading'>{this.props.heading}</h4> : null
83
+ }
84
+ <p className='sd-dropzone__description'>{this.props.text}</p>
85
+ {/* <Button text={this.props.actionText} style='hollow' onClick={() => false} /> */}
86
+ </div>
87
+ );
88
+ }
89
+ }
@@ -6,6 +6,7 @@ import { useId } from "react-id-generator";
6
6
  export interface IMenuItem {
7
7
  label: string;
8
8
  icon?: string;
9
+ active?: boolean;
9
10
  onSelect(): void;
10
11
  }
11
12
 
@@ -90,6 +91,7 @@ export const Dropdown = ({
90
91
  return (
91
92
  <div className='dropdown__menu dropdown__menu--has-head-foot'
92
93
  id={menuID}
94
+ role='menu'
93
95
  ref={ref}>
94
96
  <ul className='dropdown__menu-header'>
95
97
  {headerElements}
@@ -106,6 +108,7 @@ export const Dropdown = ({
106
108
  return (
107
109
  <div className='dropdown__menu dropdown__menu--has-head-foot'
108
110
  id={menuID}
111
+ role='menu'
109
112
  ref={ref}>
110
113
  <ul className='dropdown__menu-header'>
111
114
  {headerElements}
@@ -119,6 +122,7 @@ export const Dropdown = ({
119
122
  return (
120
123
  <div className='dropdown__menu dropdown__menu--has-head-foot'
121
124
  id={menuID}
125
+ role='menu'
122
126
  ref={ref}>
123
127
  <ul className='dropdown__menu-body'>
124
128
  {dropdownElements}
@@ -132,6 +136,7 @@ export const Dropdown = ({
132
136
  return (
133
137
  <ul className='dropdown__menu '
134
138
  id={menuID}
139
+ role='menu'
135
140
  ref={ref}>
136
141
  {dropdownElements}
137
142
  </ul>
@@ -142,9 +147,10 @@ export const Dropdown = ({
142
147
  // toggle menu
143
148
  function toggleDisplay() {
144
149
  if (!open) {
150
+ let menuRef: any;
145
151
  setOpen(true);
146
152
  if (!append) {
147
- let menuRef = ref.current;
153
+ menuRef = ref.current;
148
154
  let toggleRef = buttonRef.current;
149
155
  if (toggleRef && menuRef) {
150
156
  createPopper(toggleRef, menuRef, {
@@ -153,18 +159,21 @@ export const Dropdown = ({
153
159
  }
154
160
  } else {
155
161
  setTimeout(() => {
156
- let menuRef: any = ref.current;
162
+ menuRef = ref.current;
157
163
  let toggleRef = buttonRef.current;
158
164
  if (toggleRef && menuRef) {
159
165
  createPopper(toggleRef, menuRef, {
160
166
  placement: checkAlign() ? 'bottom-end' : 'bottom-start',
167
+ strategy: 'fixed',
161
168
  });
162
169
  menuRef.style.display = 'block';
163
170
  }
164
171
  }, 0);
165
-
166
172
  }
167
173
  document.addEventListener('click', closeMenu);
174
+ setTimeout(() => {
175
+ menuRef.getElementsByTagName('button')[0].focus();
176
+ });
168
177
  } else {
169
178
  setOpen(false);
170
179
  }
@@ -208,7 +217,8 @@ export const Dropdown = ({
208
217
  <button
209
218
  ref={refButtonSubMenu}
210
219
  className='dropdown__toggle dropdown-toggle'
211
- aria-haspopup="true"
220
+ aria-haspopup="menu"
221
+ tabIndex={0}
212
222
  onMouseOver={() => {
213
223
  let subMenuRef = refSubMenu.current;
214
224
  let subToggleRef = refButtonSubMenu.current;
@@ -223,6 +233,7 @@ export const Dropdown = ({
223
233
  {item['label']}
224
234
  </button>
225
235
  <ul ref={refSubMenu}
236
+ role='menu'
226
237
  className='dropdown__menu'>
227
238
  {submenuItems}
228
239
  </ul>
@@ -250,6 +261,7 @@ export const Dropdown = ({
250
261
  key={index}
251
262
  label={item['label']}
252
263
  icon={item['icon']}
264
+ active={item['active']}
253
265
  onSelect={item['onSelect']} />);
254
266
  }
255
267
  }
@@ -261,7 +273,7 @@ export const Dropdown = ({
261
273
  <div ref={buttonRef} style={{ display: 'content' }}>
262
274
  {React.cloneElement(children, {
263
275
  className: children.props.className ? (children.props.className + ' dropdown__toggle dropdown-toggle') : 'dropdown__toggle dropdown-toggle',
264
- 'aria-haspopup': "true",
276
+ 'aria-haspopup': "menu",
265
277
  'aria-expanded': open,
266
278
  onClick: toggleDisplay,
267
279
  ref: buttonRef,
@@ -270,7 +282,8 @@ export const Dropdown = ({
270
282
  :
271
283
  <button ref={buttonRef}
272
284
  className=' dropdown__toggle dropdown-toggle'
273
- aria-haspopup="true"
285
+ aria-haspopup="menu"
286
+ tabIndex={0}
274
287
  aria-expanded={open}
275
288
  onClick={toggleDisplay}>
276
289
  {children}
@@ -281,7 +294,7 @@ export const Dropdown = ({
281
294
  null : (function() {
282
295
  if (header && footer) {
283
296
  return (
284
- <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
297
+ <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
285
298
  <ul className='dropdown__menu-header'>
286
299
  {headerElements}
287
300
  </ul>
@@ -295,7 +308,7 @@ export const Dropdown = ({
295
308
  );
296
309
  } else if (header) {
297
310
  return (
298
- <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
311
+ <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
299
312
  <ul className='dropdown__menu-header'>
300
313
  {headerElements}
301
314
  </ul>
@@ -306,7 +319,7 @@ export const Dropdown = ({
306
319
  );
307
320
  } else if (footer) {
308
321
  return (
309
- <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
322
+ <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
310
323
  <ul className='dropdown__menu-body'>
311
324
  {dropdownElements}
312
325
  </ul>
@@ -317,7 +330,7 @@ export const Dropdown = ({
317
330
  );
318
331
  } else {
319
332
  return (
320
- <ul className='dropdown__menu' ref={ref} >
333
+ <ul className='dropdown__menu' role='menu' ref={ref} >
321
334
  {dropdownElements}
322
335
  </ul>
323
336
  );
@@ -330,10 +343,16 @@ export const Dropdown = ({
330
343
  const DropdownItem = ({
331
344
  label,
332
345
  icon,
346
+ active,
333
347
  onSelect,
334
348
  }: IMenuItem) => {
335
349
  return (
336
- <li><button onClick={onSelect}><i className={icon ? ('icon-' + icon) : ''}></i>{label}</button></li>
350
+ <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
351
+ <button tabIndex={0} role='menuitem' onClick={onSelect}>
352
+ <i className={icon ? ('icon-' + icon) : ''}></i>
353
+ {label}
354
+ </button>
355
+ </li>
337
356
  );
338
357
 
339
358
  };