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
@@ -0,0 +1,143 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Container, Text, Heading, Button, ButtonGroup } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class ContainerDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Container</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <Container>
17
+ Cum sociis natoque penatibus et magnis dis parturient...
18
+ </Container>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">
23
+ The Container is a convenient layout component with different layout options and support for external CSS classes.
24
+ The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is
25
+ intended to be used with helper CSS classes to achieve desired styling options
26
+ </p>
27
+
28
+ <Markup.ReactMarkup>
29
+ <Markup.ReactMarkupPreview>
30
+ <p className="docs-page__paragraph">// Basic</p>
31
+ <div className='docs-page__content-row'>
32
+ <Container>
33
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur
34
+ est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac
35
+ consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare
36
+ sem lacinia quam venenatis vestibulum.
37
+ </Container>
38
+ </div>
39
+
40
+ <p className="docs-page__paragraph">// Usage examples</p>
41
+
42
+ <div className='docs-page__content-row'>
43
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
44
+ <span>Curabitur blandit tempus porttitor.</span>
45
+ <Button text="Test button" type="primary" onClick={()=> false} />
46
+ <Button text="Test button" type="highlight" onClick={()=> false} />
47
+ <ButtonGroup align="end">
48
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
49
+ <Button text="Submit" onClick={()=> false} type="primary" />
50
+ </ButtonGroup>
51
+ </Container>
52
+ </div>
53
+
54
+ <div className='docs-page__content-row'>
55
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
56
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
57
+ <Text color='light'>
58
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
59
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
60
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
61
+ posuere velit aliquet. Aenean eu leo quam.
62
+ </Text>
63
+ <ButtonGroup align="end">
64
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
65
+ <Button text="Submit" onClick={()=> false} type="primary" />
66
+ </ButtonGroup>
67
+ </Container>
68
+ </div>
69
+
70
+ <div className='docs-page__content-row'>
71
+ <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
72
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
73
+ <Text color='light'>
74
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
75
+ Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
76
+ Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
77
+ posuere velit aliquet. Aenean eu leo quam.
78
+ </Text>
79
+ <ButtonGroup align="end">
80
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
81
+ <Button text="Submit" onClick={()=> false} type="primary" />
82
+ </ButtonGroup>
83
+ </Container>
84
+ </div>
85
+
86
+ </Markup.ReactMarkupPreview>
87
+ <Markup.ReactMarkupCode>{`
88
+ // Basic
89
+
90
+ <Container>
91
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
92
+ </Container>
93
+
94
+ // Usage examples
95
+
96
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
97
+ <span>Curabitur blandit tempus porttitor.</span>
98
+ <Button text="Test button" type="primary" onClick={()=> false} />
99
+ <Button text="Test button" type="highlight" onClick={()=> false} />
100
+ <ButtonGroup align="end">
101
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
102
+ <Button text="Submit" onClick={()=> false} type="primary" />
103
+ </ButtonGroup>
104
+ </Container>
105
+
106
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
107
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
108
+ <Text color='light'>
109
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
110
+ </Text>
111
+ <ButtonGroup align="end">
112
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
113
+ <Button text="Submit" onClick={()=> false} type="primary" />
114
+ </ButtonGroup>
115
+ </Container>
116
+
117
+ <Container gap="large" theme='dark' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
118
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
119
+ <Text color='light'>
120
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
121
+ </Text>
122
+ <ButtonGroup align="end">
123
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
124
+ <Button text="Submit" onClick={()=> false} type="primary" />
125
+ </ButtonGroup>
126
+ </Container>
127
+
128
+ `}
129
+ </Markup.ReactMarkupCode>
130
+ </Markup.ReactMarkup>
131
+
132
+ <h3 className="docs-page__h3">Props</h3>
133
+ <PropsList>
134
+ <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
135
+ <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
136
+ <Prop name='gap' isRequired={false} type='none | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
137
+ <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
138
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
139
+ </PropsList>
140
+ </section>
141
+ )
142
+ }
143
+ }
@@ -0,0 +1,103 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { DropZone, Button, Icon, Prop, PropsList } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class DropZoneDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Container</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <DropZone>
17
+
18
+ </DropZone>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">
23
+ The Container is a convenient layout component with different layout options and support for external CSS classes.
24
+ The display model is <code>flex</code> by default, but can be changed with the <code>display</code> prop. It is
25
+ intended to be used with helper CSS classes to achieve desired styling options
26
+ </p>
27
+
28
+ <Markup.ReactMarkup>
29
+ <Markup.ReactMarkupPreview>
30
+ <p className="docs-page__paragraph">// Basic</p>
31
+ <div className='docs-page__content-row'>
32
+ <DropZone actionText='Attach file' text="Drag one or more files here to upload them, or just click on the field.">
33
+
34
+ </DropZone>
35
+ </div>
36
+
37
+ <p className="docs-page__paragraph">// Usage examples</p>
38
+
39
+
40
+
41
+ <div className='docs-page__content-row'>
42
+
43
+ </div>
44
+
45
+
46
+ </Markup.ReactMarkupPreview>
47
+ <Markup.ReactMarkupCode>{`
48
+ // Basic
49
+
50
+ <Container>
51
+ Large size, justified. Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
52
+ </Container>
53
+
54
+ // Usage examples
55
+
56
+ <Container gap="large" className='sd-border--medium sd-font-size--medium sd-padding--2 sd-radius--large'>
57
+ <span>Curabitur blandit tempus porttitor.</span>
58
+ <Button text="Test button" type="primary" onClick={()=> false} />
59
+ <Button text="Test button" type="highlight" onClick={()=> false} />
60
+ <ButtonGroup align="end">
61
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
62
+ <Button text="Submit" onClick={()=> false} type="primary" />
63
+ </ButtonGroup>
64
+ </Container>
65
+
66
+ <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
67
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
68
+ <Text color='light'>
69
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
70
+ </Text>
71
+ <ButtonGroup align="end">
72
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
73
+ <Button text="Submit" onClick={()=> false} type="primary" />
74
+ </ButtonGroup>
75
+ </Container>
76
+
77
+ <Container gap="large" theme='dark-ui' direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
78
+ <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
79
+ <Text color='light'>
80
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
81
+ </Text>
82
+ <ButtonGroup align="end">
83
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
84
+ <Button text="Submit" onClick={()=> false} type="primary" />
85
+ </ButtonGroup>
86
+ </Container>
87
+
88
+ `}
89
+ </Markup.ReactMarkupCode>
90
+ </Markup.ReactMarkup>
91
+
92
+ <h3 className="docs-page__h3">Props</h3>
93
+ <PropsList>
94
+ <Prop name='display' isRequired={false} type='flex | inline-flex | block' default='flex' description='Change the default display mode (flex).'/>
95
+ <Prop name='direction' isRequired={false} type='row | column' default='row' description='Change the flex-direction property.'/>
96
+ <Prop name='gap' isRequired={false} type='none | small | medium | large' default='none' description='Set the gap between elements inside the Container.'/>
97
+ <Prop name='theme' isRequired={false} type='light | dark' default='/' description='Choose the UI theme. It will inherit the default theme if not set. All items inside will inherit the theme of the Container if it is set.'/>
98
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
99
+ </PropsList>
100
+ </section>
101
+ )
102
+ }
103
+ }
@@ -0,0 +1,106 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../js/react';
3
+ import { PropsList, Prop, Heading } from '../../../app-typescript';
4
+
5
+ interface IProps {
6
+ children?: React.ReactNode;
7
+ }
8
+
9
+ export default class HeadingDoc extends React.Component<IProps> {
10
+ render() {
11
+ return (
12
+ <section className='docs-page__container'>
13
+ <h2 className='docs-page__h2'>Heading</h2>
14
+
15
+ <Markup.ReactMarkupCodePreview>{`
16
+ <Heading type='h2'>
17
+ Purus Dolor Ligula
18
+ </Heading>
19
+ `}
20
+ </Markup.ReactMarkupCodePreview>
21
+
22
+ <p className="docs-page__paragraph">Heading component. By choosing the type (h1, h2, h3...) appropriate HTML tags will be rendered, preserving the semantcs.</p>
23
+
24
+ <Markup.ReactMarkup>
25
+ <Markup.ReactMarkupPreview>
26
+ <p className="docs-page__paragraph">// Basic</p>
27
+ <div className='docs-page__content-row'>
28
+ <Heading type='h1'>Heading one example</Heading>
29
+ </div>
30
+ <div className='docs-page__content-row'>
31
+ <Heading type='h2'>Heading two example</Heading>
32
+ </div>
33
+ <div className='docs-page__content-row'>
34
+ <Heading type='h3'>Heading three example</Heading>
35
+ </div>
36
+ <div className='docs-page__content-row'>
37
+ <Heading type='h4'>Heading four example</Heading>
38
+ </div>
39
+ <div className='docs-page__content-row'>
40
+ <Heading type='h5'>Heading five example</Heading>
41
+ </div>
42
+ <div className='docs-page__content-row'>
43
+ <Heading type='h6'>Heading six example</Heading>
44
+ </div>
45
+
46
+ <p className="docs-page__paragraph">// Variations</p>
47
+
48
+ <div className='docs-page__content-row'>
49
+ <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
50
+ Maecenas faucibus mollis interdum.
51
+ </Heading>
52
+ </div>
53
+ <div className='docs-page__content-row'>
54
+ <Heading type='h2' style='italic' align='end'>
55
+ Cras mattis consectetur purus sit amet fermentum.
56
+ </Heading>
57
+ </div>
58
+ <div className='docs-page__content-row'>
59
+ <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
60
+ Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
61
+ </Heading>
62
+ </div>
63
+
64
+ </Markup.ReactMarkupPreview>
65
+ <Markup.ReactMarkupCode>{`
66
+ // Basic
67
+
68
+ <Heading type='h1'>Heading one example</Heading>
69
+ <Heading type='h2'>Heading two example</Heading>
70
+ <Heading type='h3'>Heading three example</Heading>
71
+ <Heading type='h4'>Heading four example</Heading>
72
+ <Heading type='h5'>Heading five example</Heading>
73
+ <Heading type='h6'>Heading six example</Heading>
74
+
75
+ // Variations
76
+
77
+ <Heading fontStyle='serif' color='light' weight='strong' type='h1'>
78
+ Maecenas faucibus mollis interdum.
79
+ </Heading>
80
+
81
+ <Heading type='h2' style='italic' align='end'>
82
+ Cras mattis consectetur purus sit amet fermentum.
83
+ </Heading>
84
+
85
+ <Heading fontStyle='serif' type='h3' align='center' color='lighter'>
86
+ Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla.
87
+ </Heading>
88
+
89
+ `}
90
+ </Markup.ReactMarkupCode>
91
+ </Markup.ReactMarkup>
92
+
93
+ <h3 className="docs-page__h3">Props</h3>
94
+ <PropsList>
95
+ <Prop name='type' isRequired={true} type='h1 | h2 | h3 | h4 | h5 | h6' default='/' description='Heading type (eg. H1, H2, H3... etc.)'/>
96
+ <Prop name='weight' isRequired={false} type='normal | medium | strong' default='normal' description='Change the default font weight.'/>
97
+ <Prop name='style' isRequired={false} type='normal | italic' default='normal' description='Change the default text style.'/>
98
+ <Prop name='align' isRequired={false} type='start | end | center | justify' default='start' description='Text-align'/>
99
+ <Prop name='fontStyle' isRequired={false} type='sans | serif' default='sans' description='Choose between default sans (Roboto) and serif (Merriweather) font styles. '/>
100
+ <Prop name='color' isRequired={false} type='normal | light | lighter' default='normal' description='Choose a different text colour. Additional two lighter shades are available.'/>
101
+ <Prop name='className' isRequired={false} type='string' default='/' description='Add helper classes or custom CSS styles'/>
102
+ </PropsList>
103
+ </section>
104
+ )
105
+ }
106
+ }
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  import * as Markup from '../../js/react';
4
4
 
5
- import { IconButton, Prop, PropsList, Tooltip } from '../../../app-typescript';
5
+ import { IconButton, Prop, PropsList, Tooltip, Container, ButtonGroup } from '../../../app-typescript';
6
6
 
7
7
  export default class IconButtonDoc extends React.Component {
8
8
  render() {
@@ -20,38 +20,64 @@ export default class IconButtonDoc extends React.Component {
20
20
  <p className="docs-page__paragraph">// Default</p>
21
21
  <p className="docs-page__paragraph--small">Hover buttons to see tooltips.</p>
22
22
  <div className="docs-page__content-row docs-page__content-row--white">
23
- <Tooltip text='I support tooltips!'>
24
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
25
- </Tooltip>
26
- <IconButton icon='plus-large' ariaValue='Add' onClick ={()=> false} />
23
+ <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
24
+ <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
27
25
  <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
28
26
  <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
29
- <Tooltip text='My tooltip is on the right.' flow='right'>
30
- <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
31
- </Tooltip>
27
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
32
28
  </div>
33
29
  <p className="docs-page__paragraph">// Small</p>
34
30
  <div className="docs-page__content-row docs-page__content-row--white sd-d-flex ">
35
- <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
31
+ <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
36
32
  <span className="sd-margin-x--auto"></span>
37
33
  <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
38
34
  </div>
35
+
36
+ <p className="docs-page__paragraph">// Xtra large, 'outline' style</p>
37
+ <Container gap="large" className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-margin-b--3'>
38
+ <ButtonGroup align='center' spaces='loose'>
39
+ <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
40
+ <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
41
+ <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
42
+ </ButtonGroup>
43
+ </Container>
44
+
45
+ <p className="docs-page__paragraph">// Xtra large, outlineWhite style</p>
46
+ <p className="docs-page__paragraph--small">The 'outlineWhite' syle forces a white icon and outline. It can be used on dark overlays for example.</p>
47
+ <div style={{background: 'hsla(214, 13%, 12%, 1)'}} className="sd-container sd-container--flex sd-container--gap-large sd-radius--medium sd-shadow--z2 sd-padding--3">
48
+ <ButtonGroup align='center' spaces='loose'>
49
+ <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
50
+ <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
51
+ <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
52
+ </ButtonGroup>
53
+ </div>
54
+
39
55
  </Markup.ReactMarkupPreview>
40
56
  <Markup.ReactMarkupCode>{`
41
- <Tooltip text='I support tooltips!'>
42
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
43
- </Tooltip>
44
- <IconButton icon='plus-large' ariaValue='plus' onClick ={()=> false} />
45
- <IconButton icon='dots-vertical' ariaValue='dots' onClick={()=> false} />
46
- <IconButton icon='trash' ariaValue='trash' onClick={()=> false} />
47
- <Tooltip text='My tooltip is on right.' flow='right'>
48
- <IconButton icon='close-small' ariaValue='close' onClick={()=> false} />
49
- </Tooltip>
57
+ <IconButton icon='close-small' disabled ariaValue='Close' onClick={()=> false} />
58
+ <IconButton icon='plus-large' ariaValue='Add' onClick={()=> false} />
59
+ <IconButton icon='dots-vertical' ariaValue='More options' onClick={()=> false} />
60
+ <IconButton icon='trash' ariaValue='Move to trash' onClick={()=> false} />
61
+ <IconButton icon='close-small' ariaValue='Close' onClick={()=> false} />
50
62
 
51
63
  // Small
52
- <IconButton size='small' icon='plus-large' ariaValue='Add' onClick ={()=> false} />
64
+ <IconButton size='small' icon='plus-large' ariaValue='Add' onClick={()=> false} />
53
65
  ...
54
66
  <IconButton size='small' icon='close-small' ariaValue='Close' onClick={()=> false} />
67
+
68
+ // Xtra large, 'outline' style
69
+ <ButtonGroup align='center' spaces='loose'>
70
+ <IconButton style='outline' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
71
+ <IconButton style='outline' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
72
+ <IconButton style='outline' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
73
+ </ButtonGroup>
74
+
75
+ // Xtra large, outlineWhite style
76
+ <ButtonGroup align='center' spaces='loose'>
77
+ <IconButton style='outlineWhite' size='x-large' icon='pencil' ariaValue='Add' onClick={()=> false} />
78
+ <IconButton style='outlineWhite' disabled={true} size='x-large' icon='switches' ariaValue='Add' onClick={()=> false} />
79
+ <IconButton style='outlineWhite' size='x-large' icon='crop' ariaValue='Close' onClick={()=> false} />
80
+ </ButtonGroup>
55
81
  `}
56
82
  </Markup.ReactMarkupCode>
57
83
  </Markup.ReactMarkup>
@@ -59,8 +85,12 @@ export default class IconButtonDoc extends React.Component {
59
85
  <h3 className="docs-page__h3">Props</h3>
60
86
  <PropsList>
61
87
  <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.'/>
62
- <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers'/>
63
- <Prop name='size' isRequired={false} type='small' default='normal' description='Creates an IconButton with a smaller footprint.'/>
88
+ <Prop name='ariaValue' isRequired={true} type='string' default='/' description='Description for screen readers, also used as the ToolTip value.'/>
89
+ <Prop name='size' isRequired={false} type='default | small | x-large' default='default' description='Creates an IconButton with a smaller or larger footprint.'/>
90
+ <Prop name='style' isRequired={false} type='default | outline | outlineWhite' default='default' description='Different styling options.'/>
91
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Disables the Button, preventing mouse events.'/>
92
+ <Prop name='toolTipFlow' isRequired={false} type='top | left | right | down' default='top' description='Defines the possition of the ToolTip.'/>
93
+ <Prop name='toolTipAppend' isRequired={false} type='boolean' default='false' description='Uses the append to body version of the ToolTips if set to true.'/>
64
94
  </PropsList>
65
95
  </section>
66
96
  )
@@ -3,19 +3,20 @@ import * as Markup from "../../js/react";
3
3
 
4
4
  import { Icon, Prop, PropsList } from '../../../app-typescript';
5
5
 
6
+ //@ts-ignore
6
7
  import * as iconFont from '../../../app/styles/_icon-font.scss';
7
8
 
8
- export default class IconFontDoc extends React.PureComponent{
9
- render(){
9
+ export default class IconFontDoc extends React.PureComponent {
10
+ render() {
10
11
  const array = iconFont.icon.split(', ');
11
12
  const icons = array.map((icon, index) =>
12
13
  <li key={index}>
13
- <Icon name={icon}/>
14
+ <Icon name={icon} />
14
15
  <span>{icon}</span>
15
16
  </li>
16
- );
17
- return(
18
- <section className="docs-page__container">
17
+ );
18
+ return (
19
+ <section className="docs-page__container">
19
20
  <h2 className="docs-page__h2 docs-page__text-align--center">Icon font</h2>
20
21
  <Markup.ReactMarkupCodePreview>{`
21
22
  <Icon name="photo" />
@@ -0,0 +1,65 @@
1
+ import * as React from "react";
2
+ import * as Markup from "../../js/react";
3
+ import { IconPicker, PropsList, Prop } from "../../../app-typescript";
4
+
5
+ const IconPickerDocs = () => {
6
+
7
+ const [value, setValue] = React.useState('amp');
8
+
9
+ return (
10
+ <section className="docs-page__container">
11
+ <h2 className="docs-page__h2">Icon Picker</h2>
12
+ <Markup.ReactMarkupCodePreview>{`
13
+ <IconPicker
14
+ label="Icon"
15
+ filterPlaceholder="Search..."
16
+ translateFunction={(text: string): string => text}
17
+ value={value}
18
+ onChange={(value) => {
19
+ setValue(value);
20
+ }}
21
+ />
22
+ `}
23
+ </Markup.ReactMarkupCodePreview>
24
+ <Markup.ReactMarkup>
25
+ <Markup.ReactMarkupPreview>
26
+ <IconPicker
27
+ label="Icon"
28
+ filterPlaceholder="Search..."
29
+ translateFunction={(text: string): string => text}
30
+ value={value}
31
+ onChange={(value) => {
32
+ setValue(value);
33
+ }}
34
+ />
35
+ </Markup.ReactMarkupPreview>
36
+ <Markup.ReactMarkupCode>{`
37
+
38
+ const [value, setValue] = React.useState("amp");
39
+ ...
40
+ <IconPicker
41
+ label="Icon"
42
+ filterPlaceholder="Search..."
43
+ translateFunction={(text: string): string => text}
44
+ value={value}
45
+ onChange={(value) => {
46
+ setValue(value);
47
+ }}
48
+ />
49
+ `}</Markup.ReactMarkupCode>
50
+ </Markup.ReactMarkup>
51
+
52
+ <h3 className="docs-page__h3">Props</h3>
53
+ <PropsList>
54
+ <Prop name='label' isRequired={false} type='string' default='Icon' description='Select label' />
55
+ <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
56
+ <Prop name='translateFunction' isRequired={false} type='function' default='(text) => text' description='eg: gettext' />
57
+ <Prop name='value' isRequired={true} type='string' default='null' description='Current value' />
58
+ <Prop name='onChange' isRequired={true} type='Function' default='null' description='Callback onChange event ' />
59
+ </PropsList>
60
+
61
+ </section>
62
+ )
63
+ }
64
+
65
+ export default IconPickerDocs;