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,24 +1,66 @@
1
1
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic,500italic,700italic,300,300italic');
2
2
  @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400&subset=latin-ext');
3
3
 
4
+ :root {
5
+ color: hsla(214, 13%, 20%, 1);
6
+ --docs-page-color-bg-default: hsl(0, 0%, 97%);
7
+ --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
8
+ --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
9
+ --docs-page-color-bg__window-bar: hsl(0, 0%, 92%);
10
+ --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
11
+ --docs-page-color-bg__header: hsl(216, 45%, 24%);
12
+
13
+ --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
14
+ --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
15
+ --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
16
+ --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
17
+ --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 1) 4%, hsla(191, 53%, 86%, 1) 96%);
18
+
19
+ --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
20
+ --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
21
+ --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
22
+ }
23
+
24
+ :root [data-theme="dark-ui"] {
25
+ color: hsla(214, 13%, 96%, 1);
26
+ --docs-page-color-bg-default: hsla(214, 13%, 96%, 1);
27
+ --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
28
+ --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
29
+ --docs-page-color-bg__window-bar: hsl(0, 0%, 8%);
30
+ --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
31
+ --docs-page-color-bg__header: hsl(216, 40%, 18%);
32
+
33
+ --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
34
+ --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
35
+ --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
36
+ --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
37
+ --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
38
+
39
+ --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
40
+ --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
41
+ --docs-page-border__table: hsla(0, 0%, 100%, 0.2);
42
+ }
4
43
  .docs-page {
5
44
  font-family: 'Roboto', sans-serif;
6
45
  font-weight: 400;
7
46
  line-height: 140%;
8
47
  margin: 0;
9
48
  padding: 0;
10
- background-color: #f8f8f8;
11
- color: #333;
49
+ background-color: var(--docs-page-color-bg-default);
12
50
  display: grid;
13
51
  grid-template-columns: auto 1fr;
14
52
  grid-template-rows: auto 1fr;
15
53
  height: 100vh;
16
54
  }
55
+
17
56
  .docs-page {
18
57
  --docs-page-color-primary: #1397B9;
19
58
  --docs-page-color-highlight: #33C5A0;
20
59
  }
21
60
 
61
+
62
+
63
+
22
64
  hr {
23
65
  border: transparent;
24
66
  border: 1px dotted rgba(128, 128, 128, 0.75);
@@ -168,10 +210,9 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
168
210
  text-decoration: underline;
169
211
  }
170
212
  .docs-page__header {
171
- background: #5eadc8;
172
- background: #22385a;
213
+ background: var(--docs-page-color-bg__header);
173
214
  color: white;
174
- padding: 0 24px;
215
+ padding: 0 8px 0 24px;
175
216
  height: 64px;
176
217
  grid-column: 1 / 3;
177
218
  grid-row: 1 / 2;
@@ -180,6 +221,32 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
180
221
  box-shadow: 0 1px 6px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.12);
181
222
  z-index: 2;
182
223
  }
224
+ .docs-page__header-button {
225
+ background: transparent;
226
+ color: white;
227
+ padding: 0;
228
+ height: 40px;
229
+ width: 40px;
230
+ border-radius: 999px;
231
+ margin-inline-start: 0px;
232
+ margin-inline-end: 8px;
233
+ display: flex;
234
+ align-items: center;
235
+ justify-content: center;
236
+ opacity: 0.8;
237
+ transition: all 0.2s ease;
238
+ }
239
+ .docs-page__header-button i {
240
+ color: white !important;
241
+ }
242
+ .docs-page__header-button:hover {
243
+ background: hsla(0, 0%, 0%, 0.2);
244
+ opacity: 1;
245
+ }
246
+ .docs-page__header-button:active {
247
+ background: var(--sd-colour-interactive);
248
+ opacity: 1;
249
+ }
183
250
  .docs-page__header-logo {
184
251
  height: 40px;
185
252
  width: 40px;
@@ -188,7 +255,8 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
188
255
  background-size: 100%;
189
256
  }
190
257
  .docs-page__header-nav {
191
- margin-left: auto;
258
+ margin-inline-start: auto;
259
+ margin-inline-end: 16px;
192
260
  display: flex;
193
261
  flex-direction: row;
194
262
  align-items: stretch;
@@ -245,7 +313,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
245
313
  grid-column: 1 / 2;
246
314
  grid-row: 2 / 3;
247
315
  width: 280px;
248
- background-color: #ebebeb;
316
+ background-color: var(--docs-page-color-bg__aside);
249
317
  overflow-y: auto;
250
318
  }
251
319
  .docs-page__sidebar.scroll {
@@ -257,6 +325,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
257
325
  grid-row: 2 / 3;
258
326
  overflow-y: auto;
259
327
  position: relative;
328
+ background-color: var(--docs-page-color-bg-00);
260
329
  }
261
330
  .docs-page__masthead {
262
331
  display: flex;
@@ -301,29 +370,74 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
301
370
  }
302
371
  .docs-page__nav-title {
303
372
  text-transform: uppercase;
304
- color: #222;
373
+ color: var(--color-text);
305
374
  font-size: 12px;
306
375
  font-weight: 500;
307
376
  letter-spacing: 0.1em;
308
377
  display: inline-block;
309
- margin-top: 20px;
310
- margin-bottom: 6px;
311
- padding-left: 20px;
378
+ margin-block-start: 20px;
379
+ margin-block-end: 6px;
380
+ padding-inline-start: 20px;
312
381
  }
313
382
  .docs-page__nav > li:first-child .docs-page__nav-title {
314
- margin-top: 0;
383
+ margin-block-start: 0;
315
384
  }
316
385
 
317
386
  .docs-page__button-grid {
318
- margin: 2.4rem 0;
387
+ margin-block-start: 2.4rem;
388
+ margin-block-end: 2.4rem;
319
389
  display: flex;
320
390
  flex-direction: row;
321
391
  align-items: center;
322
392
  }
393
+
394
+ .docs-page__fla-button-container {
395
+ position: fixed;
396
+ top: 90px;
397
+ right:32px;
398
+ z-index: 10;
399
+ height: 4.8rem;
400
+ width: 4.8rem;
401
+ }
402
+ .docs-page__fla-button {
403
+ display: flex;
404
+ align-items: center;
405
+ justify-content: center;
406
+ border-radius: 9999px;
407
+ cursor: pointer;
408
+ height: 4.8rem;
409
+ width: 4.8rem;
410
+ /* position: fixed;
411
+ top: 90px;
412
+ right:32px;
413
+ z-index: 10; */
414
+ /* left: calc(100vw - 380px); */
415
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(0, 0, 0, 0.16);
416
+ transition: all 0.2s ease;
417
+ background-color: var(--sd-colour-background__base--00);
418
+ }
419
+ .docs-page__fla-button i[class^="icon-"] {
420
+ color: var(--color-text);
421
+ transition: all 0.2s ease;
422
+ opacity: 0.8;
423
+ }
424
+ .docs-page__fla-button:hover {
425
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 6px 32px rgba(0, 0, 0, 0.18);
426
+ }
427
+ .docs-page__fla-button:hover i[class^="icon-"] {
428
+ opacity: 1;
429
+ }
430
+ .docs-page__fla-button:active {
431
+ background-color: var(--docs-page-color-highlight);
432
+ box-shadow: 0 0px 2px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.24);
433
+ }
434
+ .docs-page__fla-button:active i[class^="icon-"] {
435
+ color: hsl(0, 0%, 100%);
436
+ }
323
437
  .docs-page__graphic-btn {
324
438
  min-width: 240px;
325
439
  margin-right: 16px;
326
- background-color: #fff;
440
+ background-color: var(--docs-page-color-bg__graphic-btn);
327
441
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
328
442
  transition: 0.2s ease-in-out;
329
443
  height: 72px;
@@ -342,7 +456,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
342
456
  .docs-page__graphic-btn-graphic {
343
457
  width: 56px;
344
458
  border-radius: 3px;
345
- background: linear-gradient(180deg, rgba(233,249,245,1) 4%, rgba(200,231,238,1) 96%);
459
+ background: var(--docs-page-color-bg__graphic-btn-graphic);
346
460
  position: relative;
347
461
  }
348
462
  .docs-page__graphic-btn-graphic img {
@@ -363,7 +477,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
363
477
  .docs-page__small-text {
364
478
  font-size: 1.3rem;
365
479
  font-weight: 300;
366
- color: #333;
480
+ color: var(--color-text-light);
367
481
  opacity: 0.7;
368
482
  }
369
483
 
@@ -372,37 +486,37 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
372
486
  font-size: 16px;
373
487
  line-height: 24px;
374
488
  font-weight: 300;
375
- color: #444;
376
- border-left: 4px solid transparent;
489
+ color: var(--color-text);
490
+ border-inline-start: 4px solid transparent;
377
491
  }
378
492
  .docs-page__nav-item a {
379
493
  font-size: 14px;
380
494
  line-height: 32px;
381
495
  display: block;
382
- padding-left: 24px;
383
- color: #444;
496
+ padding-inline-start: 24px;
497
+ color: var(--color-text-light);
384
498
  background-color: rgba(255, 255, 255, 0);
385
499
  cursor: pointer;
386
500
  text-decoration: none;
387
501
  transition: all ease-in-out 0.2s;
388
502
  }
389
503
  .docs-page__nav-item a:hover {
390
- color: #333;
391
- background-color: rgba(255, 255, 255, 0.4);
504
+ color: var(--color-text);
505
+ background-color: var(--docs-page-color-bg-00);
392
506
  }
393
507
  .docs-page__nav-item a:active {
394
- color: #333;
395
- background-color: rgba(94, 169, 200, 0.2);
508
+ color: var(--color-text-light);
509
+ background-color: var(--sd-colour-interactive--alpha-20);
396
510
  }
397
511
 
398
512
  .docs-page__nav-item.docs-page__nav-item--active {
399
- border-color: rgba(94, 169, 200, 1);
400
- background-color: rgba(255, 255, 255, 0.7);
513
+ border-color: var(--sd-colour-interactive);
514
+ background-color: var(--docs-page-color-bg-00);
401
515
  font-weight: 400;
402
516
  }
403
517
 
404
518
  .docs-page__nav-item.docs-page__nav-item--active a {
405
- color: rgba(94, 169, 200, 1);
519
+ color: var(--sd-colour-interactive);
406
520
  }
407
521
 
408
522
  .docs-page__section {
@@ -433,9 +547,9 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
433
547
  }
434
548
  .docs-page__window-bar {
435
549
  padding: 10px;
436
- border-top: 1px solid #eaeae9;
437
- border-bottom: 1px solid #dfdfde;
438
- background: #ebebeb;
550
+ border-top: 1px solid var(--docs-page-border__window-bar--top);
551
+ border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
552
+ background: var(--docs-page-color-bg__window-bar);
439
553
  }
440
554
  .docs-page__window-bar>a, .docs-page__window-bar>span {
441
555
  font-size: 16px;
@@ -483,15 +597,15 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
483
597
  border-radius: 4px;
484
598
  }
485
599
  .docs-page__content-row--white {
486
- background: #fff;
600
+ background: var(--docs-page-color-bg__content-row--white);
487
601
  }
488
602
  .docs-page__content-row--gray {
489
- background: #F2F2F2;
603
+ background: var(--docs-page-color-bg__content-row--grey);;
490
604
  padding: 10px;
491
605
  }
492
606
  .docs-page__code-markup {
493
607
  display: none;
494
- background-color: #272822;
608
+ background-color: hsl(214, 13%, 10%);
495
609
  padding: 16px 16px 16px 36px;
496
610
  overflow-y: scroll;
497
611
  }
@@ -509,11 +623,14 @@ pre.prettyprint {
509
623
 
510
624
  .docs-page__paragraph code {
511
625
  font-size: 85%;
512
- padding: 0.2em 0.4em;
513
- background-color: rgba(0,0,0,0.07);
626
+ padding: 0 0.4em;
627
+ background-color: var(--sd-colour-interactive--alpha-20);
514
628
  border-radius: 3px;
515
629
  font-family: 'Source Code Pro', monospace;
516
630
  font-weight: 400;
631
+ line-height: inherit;
632
+ vertical-align: baseline;
633
+ color: var(--color-text);
517
634
  }
518
635
 
519
636
  .docs-page__unordered-list {
@@ -555,7 +672,7 @@ pre.prettyprint {
555
672
  padding: 20px;
556
673
  }
557
674
  .docs-page__code-example .flex-grid.flex-grid--boxed .flex-grid__item {
558
- background-color: #fff !important;
675
+ background-color: var(--docs-page-color-bg-10) !important;
559
676
  border:none;
560
677
  border-radius: 2px;
561
678
  box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
@@ -565,6 +682,7 @@ pre.prettyprint {
565
682
  max-width: 1200px;
566
683
  display: grid;
567
684
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
685
+ transition: all 0.2s ease;
568
686
  }
569
687
  .docs-page__icon-font-list li {
570
688
  display: flex;
@@ -577,12 +695,11 @@ pre.prettyprint {
577
695
  transition: all 0.2s ease-in-out;
578
696
  }
579
697
  .docs-page__icon-font-list li:hover {
580
- box-shadow: 0 1px 6px rgba(0,0,0,.24);
698
+ box-shadow: 0 0 0 1px var(--sd-shadow-outline), 0 1px 2px hsla(0, 0%, 0%, 0.12), 0 1px 6px hsla(0, 0%, 0%, 0.24);
581
699
  }
582
700
 
583
701
  .docs-page__icon-font-list li i {
584
702
  margin-bottom: 8px;
585
- color: #000;
586
703
  }
587
704
 
588
705
  .docs-page__container {
@@ -694,7 +811,7 @@ pre.prettyprint {
694
811
  }
695
812
 
696
813
  .docs-page__playground_picker {
697
- text-align: right;
814
+ text-align: end;
698
815
  }
699
816
 
700
817
  .docs-page__playground_picker .dropdown__toggle {
@@ -713,9 +830,9 @@ pre.prettyprint {
713
830
  .docs-page__grid-page-example {
714
831
  position: relative;
715
832
  min-height: 600px;
716
- background-color: rgb(239, 239, 239);
833
+ background-color: var(--sd-colour-background__main-list);
717
834
  overflow: hidden;
718
- border: 1px solid rgb(218, 218, 218);
835
+ border: 1px solid var(--color-border-line--light);
719
836
  display: grid;
720
837
  grid-template-rows: auto 1fr;
721
838
  grid-template-columns: auto 1fr;
@@ -735,6 +852,13 @@ pre.prettyprint {
735
852
  grid-row: 2/3;
736
853
  grid-column: 2/3;
737
854
  }
855
+
856
+ #scrollContainer {
857
+ overflow: scroll;
858
+ scroll-behavior: smooth;
859
+ }
860
+
861
+ .
738
862
  /* ---------------- COLOR SWATCHES ---------------- */
739
863
 
740
864
  .doc-swatches__grid {
@@ -777,7 +901,7 @@ pre.prettyprint {
777
901
  }
778
902
 
779
903
  .docs-page__example-box {
780
- background-color: #fff;
904
+ background-color: var(--docs-page-color-bg__example-box);
781
905
  display: flex;
782
906
  align-items: center;
783
907
  justify-content: center;
@@ -800,7 +924,7 @@ pre.prettyprint {
800
924
  font-size: 15px;
801
925
  font-weight: 300;
802
926
  line-height: 150%;
803
- color: #646464;
927
+ color: var(--color-text-light);
804
928
  }
805
929
  .docs-page__color--primary {
806
930
  color: var(--docs-page-color-primary) !important;
@@ -825,22 +949,57 @@ doc-gif-img:hover img {
825
949
  cursor: pointer;
826
950
  }
827
951
 
828
- .docs-page__container table{
952
+ .docs-page__container table {
829
953
  margin-bottom: 32px;
954
+ border-color: var(--docs-page-border__table) !important;
830
955
  }
831
- /* -------------- END COLOR SWATCHES -------------- */
956
+ .docs-page__container table th,
957
+ .docs-page__container table td {
958
+ border-color: var(--docs-page-border__table) !important;
959
+ }
960
+
832
961
 
962
+ /* -------------- END COLOR SWATCHES -------------- */
833
963
  /* -------------- PrismJS overrides -------------- */
964
+
834
965
  code[class*="language-"],
835
966
  pre[class*="language-"] {
836
967
  font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
837
968
  font-size: 1.1em;
838
969
  border-radius: 0.4rem;
839
970
  }
971
+ pre[class*="language-"] {
972
+ background: hsl(214, 13%, 8%);
973
+ }
840
974
 
841
975
  /*// extra large screen media query /100em = 1600px/*/
842
976
  @media only screen and (min-width: 100em) {
843
977
  .docs-page__section {
844
978
  max-width: 80%;
845
979
  }
846
- }
980
+ }
981
+
982
+
983
+ /* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
984
+
985
+ doc-react-playground {
986
+ display: contents;
987
+ }
988
+
989
+ .docs-page doc-react-playground .sd-main-content-grid {
990
+ grid-column: 2 / 3;
991
+ overflow: auto;
992
+ }
993
+
994
+ .docs-page .sd-editor-grid {
995
+ grid-row: 2 / 3;
996
+ grid-column: 2 / 3;
997
+ overflow-y: auto;
998
+ }
999
+ .docs-page doc-react-playground .sd-editor-grid {
1000
+ grid-row: 2 / 3;
1001
+ grid-column: 2 / 3;
1002
+ overflow-y: auto;
1003
+ }
1004
+
1005
+ /* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -1,14 +1,11 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <title>Superdesk UI Framework</title>
7
- <link rel="icon" type="image/x-icon" href="favicon.ico" />
8
- </head>
9
-
10
- <body>
11
- <div class="docs-page" ng-app="ui-docs" doc-playground ng-view></div>
12
- </body>
13
-
2
+ <html dir="auto" lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Superdesk UI Framework</title>
6
+ <link rel="icon" type="image/x-icon" href="favicon.ico" />
7
+ </head>
8
+ <body>
9
+ <div class="docs-page" ng-app="ui-docs" doc-playground ng-view></div>
10
+ </body>
14
11
  </html>
package/examples/index.js CHANGED
@@ -336,6 +336,10 @@ export default angular.module('ui-docs', [
336
336
  name: 'Master Desk',
337
337
  page: 'master-desk.html'
338
338
  },
339
+ 'editor-3-test': {
340
+ name: 'Editor grid',
341
+ page: 'editor-3-test.html'
342
+ },
339
343
  },
340
344
  // Publisher playgrounds
341
345
  publisher: {
@@ -386,6 +390,22 @@ export default angular.module('ui-docs', [
386
390
  'test-ground': {
387
391
  name: 'Test Ground',
388
392
  component: 'TestGround'
393
+ },
394
+ 'ui-playground': {
395
+ name: 'UI',
396
+ component: 'UiPlayground'
397
+ },
398
+ 'pagelayout-test': {
399
+ name: 'PageLayout Test',
400
+ component: 'PageLayoutTest'
401
+ },
402
+ 'editor-test': {
403
+ name: 'Editor Layout Test',
404
+ component: 'EditorTest'
405
+ },
406
+ 'personal-profile': {
407
+ name: 'Personal Profile',
408
+ component: 'PersonalProfile'
389
409
  }
390
410
  }
391
411
  }))
@@ -93,7 +93,7 @@
93
93
  <div class="docs-page__window-content">
94
94
  <div class="docs-page__code-example">
95
95
  <p class="docs-page__paragraph">// Boxed grid example with six columns.</p>
96
- <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-6">
96
+ <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6">
97
97
  <div class="flex-grid__item">1</div>
98
98
  <div class="flex-grid__item">2</div>
99
99
  <div class="flex-grid__item">3</div>
@@ -45,7 +45,7 @@
45
45
  <sd-check ng-model="def6" label-position="inside" data-icon="th-list">Button style with icon</sd-check>
46
46
  <sd-check ng-model="def7" label-position="inside" data-icon="th" ng-checked="true">I have an icon!</sd-check>
47
47
  <sd-check ng-model="def8" label-position="inside" data-icon="th-large">Yeah, me too!</sd-check>
48
- <sd-check ng-model="def9" data-icon="star">I have an icon :) </sd-check>
48
+ <sd-check ng-model="def9" data-icon="star" disabled="disabled">I have an icon :) </sd-check>
49
49
  </div>
50
50
  </div>
51
51
 
@@ -79,7 +79,7 @@
79
79
  </div>
80
80
  </li>
81
81
 
82
- <li class="boxed-list__item boxed-list__item--selcted boxed-list__item--clickable">
82
+ <li class="boxed-list__item boxed-list__item--selected boxed-list__item--clickable">
83
83
  <div class="boxed-list__item-media">
84
84
  <figure class="avatar sd-margin--0 pink--600">mm</figure>
85
85
  </div>
@@ -2,10 +2,15 @@
2
2
  <a class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
3
3
  <p class="sd-top-menu__header">Cards</p>
4
4
  </header>
5
- <main class="sd-page">
5
+ <main class="sd-page" ng-init="darkUI = false" data-theme="{{darkUI ? 'dark-ui' : 'light-ui'}}">
6
6
  <section class="sd-page__main-content">
7
- <div class="sd-page__header sd-page__header--white">
8
- <h2 class="sd-page__page-heading">Card options</h2>
7
+ <div class="subnav">
8
+ <h2 class="subnav__page-title">Card options</h2>
9
+ <div class="button-group button-group--right">
10
+ <button class="sd-navbtn" ng-click="darkUI = !darkUI">
11
+ <i class="icon-adjust"></i>
12
+ </button>
13
+ </div>
9
14
  </div>
10
15
  <div class="sd-page__content">
11
16
 
@@ -35,7 +40,7 @@
35
40
  </div>
36
41
 
37
42
  <div class="sd-card flex-grid__item">
38
- <div class="sd-card__header sd-card__header--white">
43
+ <div class="sd-card__header sd-card__header--light">
39
44
  <div class="sd-card__heading">Features Desk</div>
40
45
  <a class="icn-btn sd-card__actions"><i class="icon-pencil"></i></a>
41
46
  </div>
@@ -0,0 +1,15 @@
1
+
2
+ <div class="sd-padding--4">
3
+ <button class="btn btn--primary btn--loading" tabindex="0" aria-label="">
4
+ <div class="btn__state--loading">
5
+ <svg class="sd-spinner sd-spinner--mini" viewBox="0 0 48 48">
6
+ <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
7
+ </svg>
8
+ </div>
9
+ primary
10
+ </button>
11
+ </div>
12
+
13
+ <svg class="sd-spinner sd-spinner sd-spinner--large" viewBox="0 0 48 48">
14
+ <circle class="sd-spinner__path" cx="24" cy="24" r="18" fill="none" stroke-width="6"></circle>
15
+ </svg>
@@ -16,13 +16,15 @@
16
16
  <div style="width: 70%; margin: 100px auto; max-width: 900px;" class="docs-page__code-window">
17
17
 
18
18
  <div class="sd-form-element" style="padding: 30px;" data-theme="{{darkTheme ? 'dark-ui' : 'ligh-ui'}}">
19
- <div class="form__item">
20
- <div class="sd-input">
21
- <label class="sd-input__label">input field label 1</label>
22
- <input class="sd-input__input" type="text">
23
- <div class="sd-input__char-count">00/90</div>
24
- <div class="sd-input__message-box">
25
- <div class="sd-input__hint">Hendrerit in vulputate.</div>
19
+ <div class="form__group">
20
+ <div class="form__item">
21
+ <div class="sd-input">
22
+ <label class="sd-input__label">input field label 1</label>
23
+ <input class="sd-input__input" type="text">
24
+ <div class="sd-input__char-count">00/90</div>
25
+ <div class="sd-input__message-box">
26
+ <div class="sd-input__hint">Hendrerit in vulputate.</div>
27
+ </div>
26
28
  </div>
27
29
  </div>
28
30
  </div>