superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

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 (519) hide show
  1. package/app/fonts/sd_big-icons.eot +0 -0
  2. package/app/fonts/sd_big-icons.svg +55 -53
  3. package/app/fonts/sd_big-icons.ttf +0 -0
  4. package/app/fonts/sd_big-icons.woff +0 -0
  5. package/app/fonts/sd_icons.eot +0 -0
  6. package/app/fonts/sd_icons.svg +1 -0
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/img/dots.svg +3 -0
  10. package/app/img/spinner.svg +3 -0
  11. package/app/img/themes/theme-base.svg +1 -0
  12. package/app/img/themes/theme-contrast.svg +45 -0
  13. package/app/img/themes/theme-dark.svg +1 -0
  14. package/app/img/themes/theme-light.svg +1 -0
  15. package/app/index.js +2 -1
  16. package/app/scripts/check.js +1 -1
  17. package/app/scripts/modals.js +1 -0
  18. package/app/styles/_accessibility.scss +308 -6
  19. package/app/styles/_alerts.scss +227 -97
  20. package/app/styles/_avatar.scss +60 -33
  21. package/app/styles/_badge.scss +55 -26
  22. package/app/styles/_big-icon-font.scss +61 -23
  23. package/app/styles/_boxed-list.scss +67 -23
  24. package/app/styles/_buttons.scss +548 -1026
  25. package/app/styles/_carousel.scss +19 -13
  26. package/app/styles/_content-divider.scss +125 -0
  27. package/app/styles/_design-tokens.scss +2 -0
  28. package/app/styles/_drag-drop.scss +1 -1
  29. package/app/styles/_empty-states.scss +9 -1
  30. package/app/styles/_helpers.scss +654 -311
  31. package/app/styles/_icon-font.scss +343 -309
  32. package/app/styles/_icon-labels.scss +69 -14
  33. package/app/styles/_labels.scss +65 -52
  34. package/app/styles/_loaders.scss +28 -0
  35. package/app/styles/_master-desk.scss +11 -11
  36. package/app/styles/_mixins.scss +21 -13
  37. package/app/styles/_modals.scss +103 -116
  38. package/app/styles/_normalize.scss +1 -0
  39. package/app/styles/_panel-info.scss +21 -16
  40. package/app/styles/_popover.scss +2 -2
  41. package/app/styles/_pr-superdesk-theme.scss +4 -0
  42. package/app/styles/_publisher-styles.scss +182 -0
  43. package/app/styles/_reboot.scss +1 -0
  44. package/app/styles/_sd-tag-input.scss +184 -97
  45. package/app/styles/_simple-list.scss +41 -19
  46. package/app/styles/_table-list.scss +244 -0
  47. package/app/styles/_tables.scss +5 -4
  48. package/app/styles/_tabs.scss +24 -75
  49. package/app/styles/_tag-labels.scss +47 -47
  50. package/app/styles/_thumb-carousel.scss +11 -10
  51. package/app/styles/_toggle-box.scss +52 -46
  52. package/app/styles/_toggle-button.scss +42 -0
  53. package/app/styles/_tooltips.scss +55 -98
  54. package/app/styles/_variables.scss +0 -1
  55. package/app/styles/app.scss +17 -1
  56. package/app/styles/components/_card-item.scss +41 -28
  57. package/app/styles/components/_list-item.scss +47 -113
  58. package/app/styles/components/_sd-circular-progress.scss +1 -1
  59. package/app/styles/components/_sd-collapse-box.scss +6 -33
  60. package/app/styles/components/_sd-comment-box.scss +1 -1
  61. package/app/styles/components/_sd-dropzone.scss +114 -0
  62. package/app/styles/components/_sd-grid-item.scss +78 -180
  63. package/app/styles/components/_sd-loader.scss +1 -16
  64. package/app/styles/components/_sd-media-carousel.scss +10 -12
  65. package/app/styles/components/_sd-photo-preview.scss +13 -13
  66. package/app/styles/components/_sd-searchbar.scss +43 -127
  67. package/app/styles/components/_sd-toaster.scss +13 -6
  68. package/app/styles/components/_subnav.scss +172 -171
  69. package/app/styles/components/_theme-selector.scss +189 -0
  70. package/app/styles/components/sd-slider.scss +11 -11
  71. package/app/styles/design-tokens/_design-tokens-general.scss +84 -0
  72. package/app/styles/design-tokens/_new-colors.scss +702 -0
  73. package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
  74. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  75. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  76. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  77. package/app/styles/editor/_editor-buttons.scss +54 -0
  78. package/app/styles/editor/_editor-themes.scss +437 -0
  79. package/app/styles/form-elements/_autocomplete.scss +12 -41
  80. package/app/styles/form-elements/_checkbox.scss +180 -245
  81. package/app/styles/form-elements/_forms-general.scss +92 -20
  82. package/app/styles/form-elements/_inputs.scss +100 -350
  83. package/app/styles/form-elements/_radio.scss +6 -6
  84. package/app/styles/form-elements/_select-grid.scss +16 -14
  85. package/app/styles/form-elements/_switch.scss +26 -47
  86. package/app/styles/grids/_basic-grid.scss +52 -26
  87. package/app/styles/grids/_grid-layout.scss +114 -65
  88. package/app/styles/grids/_layout-grid.scss +6 -6
  89. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  90. package/app/styles/interface-elements/_side-panel.scss +115 -83
  91. package/app/styles/layout/_basic-layout.scss +11 -19
  92. package/app/styles/layout/_container.scss +35 -0
  93. package/app/styles/layout/_editor.scss +398 -0
  94. package/app/styles/layout/_general.scss +4 -5
  95. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  96. package/app/styles/menus/_sd-left-navigation.scss +34 -18
  97. package/app/styles/menus/_sd-sidebar-menu.scss +123 -25
  98. package/app/styles/menus/_sd-top-menu.scss +3 -3
  99. package/app/styles/primereact/_pr-datepicker.scss +60 -9
  100. package/app/styles/primereact/_pr-dialog.scss +131 -30
  101. package/app/styles/primereact/_pr-dropdown.scss +177 -19
  102. package/app/styles/primereact/_pr-general.scss +14 -7
  103. package/app/styles/primereact/_pr-menu.scss +9 -12
  104. package/app/styles/variables/_colors.scss +124 -516
  105. package/app/styles/variables/_dimensions.scss +82 -4
  106. package/app/styles/variables/_form-elements.scss +0 -2
  107. package/app/styles/variables/_typography.scss +2 -0
  108. package/app-typescript/components/Alert.tsx +16 -1
  109. package/app-typescript/components/Avatar.tsx +21 -0
  110. package/app-typescript/components/ButtonGroup.tsx +9 -5
  111. package/app-typescript/components/Carousel.tsx +1 -1
  112. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  113. package/app-typescript/components/CheckGroup.tsx +2 -1
  114. package/app-typescript/components/Checkbox.tsx +7 -3
  115. package/app-typescript/components/CheckboxButton.tsx +9 -2
  116. package/app-typescript/components/ContentDivider.tsx +34 -0
  117. package/app-typescript/components/CreateButton.tsx +38 -0
  118. package/app-typescript/components/DatePicker.tsx +6 -2
  119. package/app-typescript/components/DropZone.tsx +89 -0
  120. package/app-typescript/components/Dropdown.tsx +30 -11
  121. package/app-typescript/components/DropdownFirst.tsx +1 -1
  122. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  123. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  124. package/app-typescript/components/Form/FormItem.tsx +20 -0
  125. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  126. package/app-typescript/components/Form/FormRow.tsx +40 -0
  127. package/app-typescript/components/Form/FormText.tsx +15 -0
  128. package/app-typescript/components/Form/index.tsx +5 -0
  129. package/app-typescript/components/Icon.tsx +3 -1
  130. package/app-typescript/components/IconButton.tsx +26 -12
  131. package/app-typescript/components/IconLabel.tsx +8 -1
  132. package/app-typescript/components/Input.tsx +39 -20
  133. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  134. package/app-typescript/components/Layouts/AuthoringContainer.tsx +27 -0
  135. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  136. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  137. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  138. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  139. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  140. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  141. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  142. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  143. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  144. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  145. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +40 -0
  146. package/app-typescript/components/Layouts/AuthoringMain.tsx +50 -0
  147. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  148. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  149. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +21 -0
  150. package/app-typescript/components/Layouts/Container.tsx +30 -0
  151. package/app-typescript/components/Layouts/ContentSplitter.tsx +23 -0
  152. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  153. package/app-typescript/components/Layouts/Layout.tsx +33 -0
  154. package/app-typescript/components/Layouts/LayoutContainer.tsx +15 -0
  155. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  156. package/app-typescript/components/Layouts/MainPanel.tsx +27 -0
  157. package/app-typescript/components/Layouts/OverlayPanel.tsx +19 -0
  158. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  159. package/app-typescript/components/Layouts/Panel.tsx +208 -0
  160. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  161. package/app-typescript/components/Layouts/index.tsx +31 -0
  162. package/app-typescript/components/LeftMenu.tsx +123 -49
  163. package/app-typescript/components/Lists/BoxedList.tsx +137 -0
  164. package/app-typescript/components/Lists/ContentList.tsx +100 -0
  165. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  166. package/app-typescript/components/Lists/TableList.tsx +208 -0
  167. package/app-typescript/components/Lists/index.tsx +2 -0
  168. package/app-typescript/components/Modal.tsx +30 -15
  169. package/app-typescript/components/MultiSelect.tsx +69 -0
  170. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  171. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  172. package/app-typescript/components/Navigation/SideBarTabs.tsx +87 -0
  173. package/app-typescript/components/Navigation/index.tsx +3 -0
  174. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  175. package/app-typescript/components/RadioGroup.tsx +69 -0
  176. package/app-typescript/components/SearchBar.tsx +79 -0
  177. package/app-typescript/components/Select.tsx +9 -9
  178. package/app-typescript/components/SelectGrid.tsx +3 -3
  179. package/app-typescript/components/SidebarMenu.tsx +68 -0
  180. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  181. package/app-typescript/components/Spinner.tsx +1 -2
  182. package/app-typescript/components/SubNav.tsx +25 -4
  183. package/app-typescript/components/Switch.tsx +34 -12
  184. package/app-typescript/components/SwitchGroup.tsx +2 -1
  185. package/app-typescript/components/TabCustom.tsx +40 -89
  186. package/app-typescript/components/TabList.tsx +18 -43
  187. package/app-typescript/components/Tag.tsx +32 -9
  188. package/app-typescript/components/Text/Heading.tsx +67 -0
  189. package/app-typescript/components/Text/Text.tsx +36 -0
  190. package/app-typescript/components/ThemeSelector.tsx +113 -0
  191. package/app-typescript/components/TimePicker.tsx +3 -3
  192. package/app-typescript/components/Togglebox.tsx +8 -6
  193. package/app-typescript/components/TreeSelect.tsx +330 -0
  194. package/app-typescript/index.ts +19 -4
  195. package/dist/avatar-2.jpg +0 -0
  196. package/dist/avatar-3.jpg +0 -0
  197. package/dist/avatar-4.jpg +0 -0
  198. package/dist/avatar-5.jpg +0 -0
  199. package/dist/avatar-6.jpg +0 -0
  200. package/dist/avatar_64.png +0 -0
  201. package/dist/components/basic-grid.html +1 -1
  202. package/dist/components/checkbox.html +1 -1
  203. package/dist/dots.svg +3 -0
  204. package/dist/examples.bundle.css +9800 -2768
  205. package/dist/examples.bundle.js +39221 -17840
  206. package/dist/index.html +9 -12
  207. package/dist/playgrounds/boxed-list.html +1 -1
  208. package/dist/playgrounds/cards.html +9 -4
  209. package/dist/playgrounds/editor-3-test.html +15 -0
  210. package/dist/playgrounds/form-layout.html +9 -7
  211. package/dist/playgrounds/layout-test-2.html +40 -36
  212. package/dist/playgrounds/list-item-test.html +1 -1
  213. package/dist/playgrounds/master-desk.html +1 -3
  214. package/dist/playgrounds/photo-desk.html +33 -33
  215. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  216. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  217. package/dist/playgrounds/react-playgrounds/Index.tsx +7 -1
  218. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  219. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  220. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  221. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  222. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  223. package/dist/playgrounds/react-playgrounds/TestGround.tsx +240 -23
  224. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  225. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  226. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  227. package/dist/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  228. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  229. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  230. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  231. package/dist/playgrounds/tags-input.html +1 -1
  232. package/dist/react/Alerts.tsx +123 -23
  233. package/dist/react/Avatar.tsx +314 -127
  234. package/dist/react/BoxedList.tsx +362 -0
  235. package/dist/react/ButtonGroups.tsx +66 -65
  236. package/dist/react/Buttons.tsx +62 -247
  237. package/dist/react/Carousel.tsx +2 -3
  238. package/dist/react/Checkboxs.tsx +66 -25
  239. package/dist/react/Container.tsx +143 -0
  240. package/dist/react/ContentDivider.tsx +178 -0
  241. package/dist/react/ContentList.tsx +280 -0
  242. package/dist/react/CreateButton.tsx +71 -0
  243. package/dist/react/DropZone.tsx +111 -0
  244. package/dist/react/Heading.tsx +106 -0
  245. package/dist/react/IconButtons.tsx +49 -42
  246. package/dist/react/IconLabels.tsx +24 -2
  247. package/dist/react/Index.tsx +133 -11
  248. package/dist/react/Inputs.tsx +33 -20
  249. package/dist/react/LeftNavigations.tsx +161 -9
  250. package/dist/react/ListItems.tsx +3 -3
  251. package/dist/react/Modal.tsx +174 -19
  252. package/dist/react/MultiSelect.tsx +193 -0
  253. package/dist/react/NavButtons.tsx +4 -4
  254. package/dist/react/Panel.tsx +366 -0
  255. package/dist/react/QuickNavigationBar.tsx +142 -0
  256. package/dist/react/RadioGroup.tsx +351 -0
  257. package/dist/react/SelectWithTemplate.tsx +1 -1
  258. package/dist/react/Selects.tsx +3 -23
  259. package/dist/react/SimpleList.tsx +148 -0
  260. package/dist/react/SubNav.tsx +69 -20
  261. package/dist/react/TableList.tsx +268 -0
  262. package/dist/react/Tabs.tsx +72 -248
  263. package/dist/react/Tags.tsx +52 -13
  264. package/dist/react/Text.tsx +134 -0
  265. package/dist/react/Tooltips.tsx +1 -1
  266. package/dist/react/TreeSelect.tsx +178 -0
  267. package/dist/react.html +4 -0
  268. package/dist/sd_big-icons.eot +0 -0
  269. package/dist/sd_big-icons.svg +55 -53
  270. package/dist/sd_big-icons.ttf +0 -0
  271. package/dist/sd_big-icons.woff +0 -0
  272. package/dist/sd_icons.eot +0 -0
  273. package/dist/sd_icons.svg +1 -0
  274. package/dist/sd_icons.ttf +0 -0
  275. package/dist/sd_icons.woff +0 -0
  276. package/dist/superdesk-ui.bundle.css +51124 -26537
  277. package/dist/superdesk-ui.bundle.js +7849 -3639
  278. package/dist/vendor.bundle.js +71 -75
  279. package/examples/css/docs-page.css +204 -46
  280. package/examples/img/avatar-2.jpg +0 -0
  281. package/examples/img/avatar-3.jpg +0 -0
  282. package/examples/img/avatar-4.jpg +0 -0
  283. package/examples/img/avatar-5.jpg +0 -0
  284. package/examples/img/avatar-6.jpg +0 -0
  285. package/examples/index.html +9 -12
  286. package/examples/index.js +28 -0
  287. package/examples/pages/components/basic-grid.html +1 -1
  288. package/examples/pages/components/checkbox.html +1 -1
  289. package/examples/pages/playgrounds/boxed-list.html +1 -1
  290. package/examples/pages/playgrounds/cards.html +9 -4
  291. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  292. package/examples/pages/playgrounds/form-layout.html +9 -7
  293. package/examples/pages/playgrounds/layout-test-2.html +40 -36
  294. package/examples/pages/playgrounds/list-item-test.html +1 -1
  295. package/examples/pages/playgrounds/master-desk.html +1 -3
  296. package/examples/pages/playgrounds/photo-desk.html +33 -33
  297. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +459 -0
  298. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  299. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +7 -1
  300. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  301. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +635 -0
  302. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +466 -0
  303. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1002 -0
  304. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  305. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +240 -23
  306. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +304 -0
  307. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +26 -0
  308. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +22 -0
  309. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +6 -1
  310. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  311. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -1
  312. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +51 -9
  313. package/examples/pages/playgrounds/tags-input.html +1 -1
  314. package/examples/pages/react/Alerts.tsx +123 -23
  315. package/examples/pages/react/Avatar.tsx +314 -127
  316. package/examples/pages/react/BoxedList.tsx +362 -0
  317. package/examples/pages/react/ButtonGroups.tsx +66 -65
  318. package/examples/pages/react/Buttons.tsx +62 -247
  319. package/examples/pages/react/Carousel.tsx +2 -3
  320. package/examples/pages/react/Checkboxs.tsx +66 -25
  321. package/examples/pages/react/Container.tsx +143 -0
  322. package/examples/pages/react/ContentDivider.tsx +178 -0
  323. package/examples/pages/react/ContentList.tsx +280 -0
  324. package/examples/pages/react/CreateButton.tsx +71 -0
  325. package/examples/pages/react/DropZone.tsx +111 -0
  326. package/examples/pages/react/Heading.tsx +106 -0
  327. package/examples/pages/react/IconButtons.tsx +49 -42
  328. package/examples/pages/react/IconLabels.tsx +24 -2
  329. package/examples/pages/react/Index.tsx +133 -11
  330. package/examples/pages/react/Inputs.tsx +33 -20
  331. package/examples/pages/react/LeftNavigations.tsx +161 -9
  332. package/examples/pages/react/ListItems.tsx +3 -3
  333. package/examples/pages/react/Modal.tsx +174 -19
  334. package/examples/pages/react/MultiSelect.tsx +193 -0
  335. package/examples/pages/react/NavButtons.tsx +4 -4
  336. package/examples/pages/react/Panel.tsx +366 -0
  337. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  338. package/examples/pages/react/RadioGroup.tsx +351 -0
  339. package/examples/pages/react/SelectWithTemplate.tsx +1 -1
  340. package/examples/pages/react/Selects.tsx +3 -23
  341. package/examples/pages/react/SimpleList.tsx +148 -0
  342. package/examples/pages/react/SubNav.tsx +69 -20
  343. package/examples/pages/react/TableList.tsx +268 -0
  344. package/examples/pages/react/Tabs.tsx +72 -248
  345. package/examples/pages/react/Tags.tsx +52 -13
  346. package/examples/pages/react/Text.tsx +134 -0
  347. package/examples/pages/react/Tooltips.tsx +1 -1
  348. package/examples/pages/react/TreeSelect.tsx +178 -0
  349. package/examples/pages/react.html +4 -0
  350. package/images/avatar_64.png +0 -0
  351. package/package.json +11 -6
  352. package/react/components/Alert.d.ts +3 -0
  353. package/react/components/Alert.js +9 -1
  354. package/react/components/Avatar.d.ts +9 -0
  355. package/react/components/Avatar.js +19 -1
  356. package/react/components/ButtonGroup.d.ts +4 -2
  357. package/react/components/ButtonGroup.js +5 -3
  358. package/react/components/Carousel.js +1 -1
  359. package/react/components/CheckButtonGroup.d.ts +3 -1
  360. package/react/components/CheckButtonGroup.js +8 -2
  361. package/react/components/CheckGroup.d.ts +1 -0
  362. package/react/components/CheckGroup.js +1 -1
  363. package/react/components/Checkbox.d.ts +2 -1
  364. package/react/components/Checkbox.js +2 -2
  365. package/react/components/CheckboxButton.d.ts +1 -0
  366. package/react/components/CheckboxButton.js +2 -2
  367. package/react/components/ContentDivider.d.ts +12 -0
  368. package/react/components/ContentDivider.js +66 -0
  369. package/react/components/CreateButton.d.ts +17 -0
  370. package/react/components/CreateButton.js +66 -0
  371. package/react/components/DatePicker.js +7 -2
  372. package/react/components/DropZone.d.ts +25 -0
  373. package/react/components/DropZone.js +93 -0
  374. package/react/components/Dropdown.d.ts +1 -0
  375. package/react/components/Dropdown.js +28 -23
  376. package/react/components/DropdownFirst.js +1 -1
  377. package/react/components/Form/FormGroup.d.ts +13 -0
  378. package/react/components/Form/FormGroup.js +61 -0
  379. package/react/components/Form/FormItem.d.ts +9 -0
  380. package/react/components/Form/FormItem.js +54 -0
  381. package/react/components/Form/FormLabel.d.ts +10 -0
  382. package/react/components/Form/FormLabel.js +54 -0
  383. package/react/components/Form/FormRow.d.ts +17 -0
  384. package/react/components/Form/FormRow.js +62 -0
  385. package/react/components/Form/FormText.d.ts +8 -0
  386. package/react/components/Form/FormText.js +47 -0
  387. package/react/components/Form/index.d.ts +5 -0
  388. package/react/components/Form/index.js +12 -0
  389. package/react/components/Icon.d.ts +1 -0
  390. package/react/components/Icon.js +2 -1
  391. package/react/components/IconButton.d.ts +9 -2
  392. package/react/components/IconButton.js +13 -5
  393. package/react/components/IconLabel.d.ts +2 -0
  394. package/react/components/IconLabel.js +6 -3
  395. package/react/components/Input.d.ts +21 -7
  396. package/react/components/Input.js +10 -13
  397. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  398. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  399. package/react/components/Layouts/AuthoringContainer.d.ts +11 -0
  400. package/react/components/Layouts/AuthoringContainer.js +58 -0
  401. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  402. package/react/components/Layouts/AuthoringFrame.js +56 -0
  403. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  404. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  405. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  406. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  407. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  408. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  409. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  410. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  411. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  412. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  413. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  414. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  415. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  416. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  417. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  418. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  419. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  420. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  421. package/react/components/Layouts/AuthoringInnerHeader.d.ts +14 -0
  422. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +23 -22
  423. package/react/components/Layouts/AuthoringMain.d.ts +14 -0
  424. package/react/components/Layouts/AuthoringMain.js +53 -0
  425. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  426. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  427. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  428. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  429. package/react/components/Layouts/AuthoringMainToolBar.d.ts +9 -0
  430. package/react/components/Layouts/AuthoringMainToolBar.js +54 -0
  431. package/react/components/Layouts/Container.d.ts +14 -0
  432. package/react/components/Layouts/Container.js +60 -0
  433. package/react/components/Layouts/ContentSplitter.d.ts +10 -0
  434. package/react/components/Layouts/ContentSplitter.js +56 -0
  435. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  436. package/react/components/Layouts/HeaderPanel.js +47 -0
  437. package/react/components/Layouts/Layout.d.ts +8 -0
  438. package/react/components/Layouts/Layout.js +35 -0
  439. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  440. package/react/components/Layouts/LayoutContainer.js +47 -0
  441. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  442. package/react/components/Layouts/LeftPanel.js +54 -0
  443. package/react/components/Layouts/MainPanel.d.ts +11 -0
  444. package/react/components/Layouts/MainPanel.js +57 -0
  445. package/react/components/Layouts/OverlayPanel.d.ts +8 -0
  446. package/react/components/Layouts/OverlayPanel.js +49 -0
  447. package/react/components/Layouts/PageLayout.d.ts +16 -0
  448. package/react/components/Layouts/PageLayout.js +64 -0
  449. package/react/components/Layouts/Panel.d.ts +66 -0
  450. package/react/components/Layouts/Panel.js +166 -0
  451. package/react/components/Layouts/RightPanel.d.ts +9 -0
  452. package/react/components/Layouts/RightPanel.js +47 -0
  453. package/react/components/Layouts/index.d.ts +28 -0
  454. package/react/components/Layouts/index.js +63 -0
  455. package/react/components/LeftMenu.d.ts +8 -3
  456. package/react/components/LeftMenu.js +55 -16
  457. package/react/components/Lists/BoxedList.d.ts +38 -0
  458. package/react/components/Lists/BoxedList.js +139 -0
  459. package/react/components/Lists/SimpleList.d.ts +21 -0
  460. package/react/components/Lists/SimpleList.js +78 -0
  461. package/react/components/Lists/index.d.ts +2 -0
  462. package/react/components/Lists/index.js +9 -0
  463. package/react/components/Modal.d.ts +5 -1
  464. package/react/components/Modal.js +11 -2
  465. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  466. package/react/components/Navigation/QuickNavBar.js +113 -0
  467. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  468. package/react/components/Navigation/SideBarMenu.js +77 -0
  469. package/react/components/Navigation/SideBarTabs.d.ts +23 -0
  470. package/react/components/Navigation/SideBarTabs.js +86 -0
  471. package/react/components/Navigation/index.d.ts +3 -0
  472. package/react/components/Navigation/index.js +8 -0
  473. package/react/components/RadioButtonGroup.d.ts +29 -0
  474. package/react/components/RadioButtonGroup.js +89 -0
  475. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  476. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  477. package/react/components/SearchBar.d.ts +23 -0
  478. package/react/components/SearchBar.js +87 -0
  479. package/react/components/Select.d.ts +2 -1
  480. package/react/components/Select.js +3 -9
  481. package/react/components/SelectGrid.js +3 -3
  482. package/react/components/SlidingToolbar.d.ts +1 -1
  483. package/react/components/SlidingToolbar.js +11 -1
  484. package/react/components/Spinner.d.ts +0 -1
  485. package/react/components/Spinner.js +1 -2
  486. package/react/components/SubNav.d.ts +8 -1
  487. package/react/components/SubNav.js +22 -4
  488. package/react/components/Switch.d.ts +4 -1
  489. package/react/components/Switch.js +19 -7
  490. package/react/components/SwitchGroup.d.ts +1 -0
  491. package/react/components/SwitchGroup.js +1 -1
  492. package/react/components/TabCustom.d.ts +11 -22
  493. package/react/components/TabCustom.js +23 -52
  494. package/react/components/TabList.d.ts +2 -11
  495. package/react/components/TabList.js +11 -32
  496. package/react/components/Tag.d.ts +4 -4
  497. package/react/components/Tag.js +16 -5
  498. package/react/components/TagInput.d.ts +0 -1
  499. package/react/components/Text/Heading.d.ts +15 -0
  500. package/react/components/Text/Heading.js +77 -0
  501. package/react/components/Text/Text.d.ts +15 -0
  502. package/react/components/Text/Text.js +65 -0
  503. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  504. package/react/components/ThemeSelector.js +112 -0
  505. package/react/components/TimePicker.js +2 -2
  506. package/react/components/Togglebox.d.ts +1 -0
  507. package/react/components/Togglebox.js +9 -2
  508. package/react/index.d.ts +17 -4
  509. package/react/index.js +41 -6
  510. package/sd_icons.eot +0 -0
  511. package/sd_icons.svg +189 -0
  512. package/sd_icons.ttf +0 -0
  513. package/sd_icons.woff +0 -0
  514. package/app/styles/_editor-themes.scss +0 -326
  515. package/app/styles/variables/_design-tokens-general.scss +0 -76
  516. package/app-typescript/components/Radio.tsx +0 -57
  517. package/app-typescript/components/RadioButton.tsx +0 -57
  518. package/dist/react/Radios.tsx +0 -391
  519. package/examples/pages/react/Radios.tsx +0 -391
package/dist/index.html CHANGED
@@ -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
- <link href="examples.bundle.css" rel="stylesheet"><link href="superdesk-ui.bundle.css" rel="stylesheet"></head>
9
-
10
- <body>
11
- <div class="docs-page" ng-app="ui-docs" doc-playground ng-view></div>
12
- <script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="examples.bundle.js"></script><script type="text/javascript" src="superdesk-ui.bundle.js"></script></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
+ <link href="examples.bundle.css" rel="stylesheet"><link href="superdesk-ui.bundle.css" rel="stylesheet"></head>
8
+ <body>
9
+ <div class="docs-page" ng-app="ui-docs" doc-playground ng-view></div>
10
+ <script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="examples.bundle.js"></script><script type="text/javascript" src="superdesk-ui.bundle.js"></script></body>
14
11
  </html>
package/dist/playgrounds/boxed-list.html CHANGED
@@ -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>
package/dist/playgrounds/cards.html CHANGED
@@ -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>
package/dist/playgrounds/editor-3-test.html ADDED
@@ -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>
package/dist/playgrounds/form-layout.html CHANGED
@@ -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>
package/dist/playgrounds/layout-test-2.html CHANGED
@@ -60,18 +60,22 @@
60
60
  <div id="leftContent" sd-media-query min-width="880" max-width="1100" ng-init="darkUI = false; listView = true" class="sd-content-wrapper__main-content-area sd-main-content-grid" ng-class="{'dark-ui': darkUI}">
61
61
  <!-- TOOLBAR HEADER -->
62
62
  <div class="sd-main-content-grid__header">
63
- <div class="subnav" ng-class="{'subnav--dark-ui': darkUI}">
63
+ <div class="subnav">
64
64
  <div class="subnav__sliding-toolbar" ng-show="select1 || select2 || select3 || select4 || select5 || select6 || select7 || select8 || select9 || select10 || select11 || select12 || select13 || select14 || select15 || select16 || select17 || select18 || select19 || select20 || select21 || select22 || select23 || select24 || select25 || select26 || select27 || select28 || select29 || select30 || select31 || select32 || select33 || select34 || select35 || select36">
65
65
  <div class="sliding-toolbar__inner">
66
- <a class="btn" ng-click="select1 = false; select2 = false; select3 = false; select4 = false; select5 = false; select6 = false; select7 = false; select8 = false">Cancel</a>
66
+ <button class="btn" ng-click="select1 = false; select2 = false; select3 = false; select4 = false; select5 = false; select6 = false; select7 = false; select8 = false">Cancel</button>
67
67
  <span class="sliding-toolbar__info-text">1 item selected</span>
68
68
  </div>
69
- <a class="btn btn--primary" ng-click="openModal('imageModal'); multiEdit = true; select1 = false; select2 = false; select3 = false; select4 = false; select5 = false; select6 = false; select7 = false; select8 = false; select11 = true; select12 = true; select13 = true; select14 = true">Edit metadata</a>
70
- <a class="btn btn--alert"><i class="icon-trash"></i>Delete</a>
69
+ <div class="button-group button-group--right">
70
+ <button class="btn btn--primary">Edit metadata</button>
71
+ <button class="btn btn--alert"><i class="icon-trash"></i>Delete</button>
72
+ </div>
71
73
  </div>
72
74
  <div class="dropdown" dropdown="">
73
- <button class="dropdown__toggle navbtn navbtn--text-only dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">Monitoring<span class="dropdown__caret"></span></button>
74
- <ul class="dropdown__menu scrollable" style="">
75
+ <button class="dropdown__toggle sd-navbtn sd-navbtn--textual dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
76
+ <span class="sd-navbtn__text">Monitoring</span>
77
+ </button>
78
+ <ul class="dropdown__menu scrollable">
75
79
  <li><div class="dropdown__menu-label ng-binding">Monitoring</div></li>
76
80
  <li><button>Incoming stage</button></li>
77
81
  <li><button>Working stage</button></li>
@@ -79,8 +83,8 @@
79
83
  </ul>
80
84
  </div>
81
85
  <div class="subnav__spacer subnav__spacer--no-margin"></div>
82
- <div class="sd-searchbar" ng-class="{'sd-searchbar--focused': focused}" >
83
- <label for="search-input" class="sd-searchbar__icon"></label>
86
+ <div class="sd-searchbar sd-searchbar--expanded" ng-class="{'sd-searchbar--focused': focused}" >
87
+ <label for="search-input" class="sd-searchbar__icon" aria-hidden="Search content"></label>
84
88
  <input id="search-input"
85
89
  class="sd-searchbar__input"
86
90
  type="text"
@@ -89,15 +93,15 @@
89
93
  ng-model="query"
90
94
  tabindex="1"
91
95
  ng-focus="focused = true">
92
- <button class="sd-searchbar__cancel" ng-if="query">
93
- <i class="icon-remove-sign"></i>
96
+ <button class="sd-searchbar__cancel" ng-if="query" aria-label="Reset search">
97
+ <i class="icon-remove-sign" aria-hidden="true"></i>
94
98
  </button>
95
- <button id="sd-searchbar__search-btn" class="sd-searchbar__search-btn" ng-if="focused" tabindex="2">
96
- <i class="big-icon--chevron-right"></i>
99
+ <button id="sd-searchbar__search-btn" aria-label="Start search" class="sd-searchbar__search-btn" ng-if="focused" tabindex="2">
100
+ <i class="icon-chevron-right-thin" aria-hidden="true"></i>
97
101
  </button>
98
102
  </div>
99
103
  <div class="dropdown dropdown--align-right" dropdown>
100
- <button class="dropdown__toggle navbtn sd-create-btn" dropdown__toggle>
104
+ <button class="dropdown__toggle sd-navbtn sd-create-btn" dropdown__toggle>
101
105
  <i class="icon-plus-large"></i>
102
106
  <span class="circle"></span>
103
107
  </button>
@@ -115,8 +119,8 @@
115
119
  </ul>
116
120
  </div>
117
121
  </div>
118
- <div class="subnav" ng-class="{'subnav--dark-ui': darkUI}">
119
- <button class="navbtn navbtn--left navbtn--darker" ng-click="leftFilterOpen = !leftFilterOpen" ng-class="{'navbtn--active': leftFilterOpen}">
122
+ <div class="subnav">
123
+ <button class="sd-navbtn sd-navbtn--left sd-navbtn--darker" ng-click="leftFilterOpen = !leftFilterOpen" ng-class="{'sd-navbtn--active': leftFilterOpen}">
120
124
  <i class="icon-filter-large"></i>
121
125
  </button>
122
126
  <div class="subnav__stretch-bar">
@@ -149,11 +153,11 @@
149
153
  <a class="icn-btn" sd-tooltip="Ascending" flow="bottom" ng-click="sortDesc = !sortDesc" ng-show="!sortDesc"><i class="icon-ascending"></i></a>
150
154
 
151
155
  </div>
152
- <button class="navbtn" ng-click="darkUI = !darkUI">
156
+ <button class="sd-navbtn" ng-click="darkUI = !darkUI">
153
157
  <i class="icon-adjust"></i>
154
158
  </button>
155
159
  <div class="dropdown dropdown--align-right" dropdown>
156
- <button class="navbtn" dropdown__toggle>
160
+ <button class="sd-navbtn" dropdown__toggle>
157
161
  <i class="icon-list-view" ng-show="listView"></i>
158
162
  <i class="icon-kanban-view" ng-show="swimlaneView"></i>
159
163
  <i class="icon-grid-view" ng-show="gridView"></i>
@@ -166,7 +170,7 @@
166
170
  </ul>
167
171
  </div>
168
172
  <div class="dropdown dropdown--align-right" dropdown>
169
- <button class="dropdown__toggle navbtn" dropdown__toggle>
173
+ <button class="dropdown__toggle sd-navbtn" dropdown__toggle>
170
174
  <i class="icon-dots-vertical"></i>
171
175
  </button>
172
176
  <ul class="dropdown__menu">
@@ -184,7 +188,7 @@
184
188
  <!-- FILTER PANEL -->
185
189
  <div class="sd-main-content-grid__filter" ng-class="{'open-filters': leftFilterOpen}">
186
190
  <div class="side-panel__container">
187
- <div class="side-panel side-panel--shadow-left">
191
+ <div class="side-panel side-panel--grey side-panel--left">
188
192
  <div class="side-panel__header side-panel__header--border-b">
189
193
  <a class="icn-btn side-panel__close" sd-tooltip="Close filters" flow="left" ng-click="leftFilterOpen = !leftFilterOpen"><i class="icon-close-small"></i></a>
190
194
  <h3 class="side-panel__heading">Advanced filters</h3>
@@ -564,18 +568,18 @@
564
568
  <!-- PREVIEW PANEL -->
565
569
  <div class="sd-main-content-grid__preview" ng-class="{'open-preview': leftPreviewOpen}">
566
570
  <div class="side-panel__container">
567
- <div class="side-panel side-panel--bg-00 side-panel--shadow-right" ng-class="{'side-panel--dark-ui' : darkUI}">
571
+ <div class="side-panel side-panel--bg-00 side-panel--shadow-right">
568
572
  <div class="side-panel__header">
569
573
  <div class="side-panel__tools">
570
574
  <!-- <a class="icn-btn" sd-tooltip="Edit details" flow="top" ng-click="editorOpen = true; leftPreviewOpen = false"><i class="icon-pencil"></i></a> -->
571
575
  <a class="icn-btn" sd-tooltip="Close details" flow="top" ng-click="leftPreviewOpen = !leftPreviewOpen; selectThis1 = !selectThis1"><i class="icon-close-small"></i></a>
572
576
  </div>
573
- <ul class="nav-tabs" ng-class="{'nav-tabs--ui-dark' : darkUI}">
574
- <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'event-details'}" class="nav-tabs__tab">
575
- <button ng-click="tab = 'event-details'" class="nav-tabs__link"><span translate="">Content</span></button>
577
+ <ul class="sd-nav-tabs">
578
+ <li ng-class="{'sd-nav-tabs__tab--active': !tab || tab === 'event-details'}" class="sd-nav-tabs__tab">
579
+ <button ng-click="tab = 'event-details'" class="sd-nav-tabs__link"><span translate="">Content</span></button>
576
580
  </li>
577
- <li ng-class="{'nav-tabs__tab--active': tab === 'event-history'}" class="nav-tabs__tab">
578
- <button ng-click="tab = 'event-history'" class="nav-tabs__link"><span translate="">History</span></button>
581
+ <li ng-class="{'sd-nav-tabs__tab--active': tab === 'event-history'}" class="sd-nav-tabs__tab">
582
+ <button ng-click="tab = 'event-history'" class="sd-nav-tabs__link"><span translate="">History</span></button>
579
583
  </li>
580
584
  </ul>
581
585
  </div>
@@ -701,16 +705,16 @@
701
705
  </div>
702
706
  </div>
703
707
  <!-- OVERLAY PANEL ( Send To ) -->
704
- <div class="sd-main-content-grid__overlay">
705
- <div class="sd-overlay-panel sd-overlay-panel--dark-ui" ng-class="{'sd-overlay-panel--open' : sendToOpen}">
706
- <div class="side-panel side-panel--dark-ui">
708
+ <div class="sd-main-content-grid__overlay" data-theme="dark-ui">
709
+ <div class="sd-overlay-panel" ng-class="{'sd-overlay-panel--open' : sendToOpen}">
710
+ <div class="side-panel">
707
711
  <div class="side-panel__header">
708
712
  <div class="side-panel__tools">
709
713
  <a class="icn-btn" ng-click="sendToOpen = !sendToOpen"><i class="icon-close-small"></i></a>
710
714
  </div>
711
- <ul class="nav-tabs nav-tabs--big nav-tabs--ui-dark">
712
- <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'send-to'}" class="nav-tabs__tab">
713
- <button class="nav-tabs__link"><span translate="">Send to</span></button>
715
+ <ul class="sd-nav-tabs sd-nav-tabs--big">
716
+ <li ng-class="{'sd-nav-tabs__tab--active': !tab || tab === 'send-to'}" class="sd-nav-tabs__tab">
717
+ <button class="sd-nav-tabs__link"><span translate="">Send to</span></button>
714
718
  </li>
715
719
  </ul>
716
720
  </div>
@@ -719,7 +723,7 @@
719
723
  <div class="side-panel__content-block">
720
724
  <div sd-toggle-box data-title="Destination" data-style="circle" data-open="true">
721
725
  <div class="form__row">
722
- <div class="sd-line-input sd-line-input--is-select sd-line-input--dark-ui sd-line-input--boxed sd-line-input--no-label sd-line-input--no-margin">
726
+ <div class="sd-line-input sd-line-input--is-select sd-line-input--boxed sd-line-input--no-label sd-line-input--no-margin">
723
727
  <select class="sd-line-input__select">
724
728
  <option value="single">Politics desk</option>
725
729
  <option value="time">Sports desk</option>
@@ -740,12 +744,12 @@
740
744
  </div>
741
745
  <div sd-toggle-box data-title="Embargo" data-style="circle" data-open="true">
742
746
  <div class="form__row form__row--flex form__row--small-padding">
743
- <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed sd-line-input--no-margin">
747
+ <div class="sd-line-input sd-line-input--boxed sd-line-input--no-margin">
744
748
  <a class="icn-btn sd-line-input__icon-right"><i class="icon-calendar"></i></a>
745
749
  <label class="sd-line-input__label">Embargo till</label>
746
750
  <input class="sd-line-input__input" type="text">
747
751
  </div>
748
- <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed sd-line-input--no-margin">
752
+ <div class="sd-line-input sd-line-input--boxed sd-line-input--no-margin">
749
753
  <a class="icn-btn sd-line-input__icon-right"><i class="icon-time"></i></a>
750
754
  <input class="sd-line-input__input" type="text">
751
755
  </div>
@@ -754,12 +758,12 @@
754
758
  </div>
755
759
  <div sd-toggle-box data-title="Publish schedule" data-style="circle" data-open="true">
756
760
  <div class="form__row form__row--flex form__row--small-padding">
757
- <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed sd-line-input--no-margin">
761
+ <div class="sd-line-input sd-line-input--boxed sd-line-input--no-margin">
758
762
  <a class="icn-btn sd-line-input__icon-right"><i class="icon-calendar"></i></a>
759
763
  <label class="sd-line-input__label">Publish on</label>
760
764
  <input class="sd-line-input__input" type="text">
761
765
  </div>
762
- <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed sd-line-input--no-margin">
766
+ <div class="sd-line-input sd-line-input--boxed sd-line-input--no-margin">
763
767
  <a class="icn-btn sd-line-input__icon-right"><i class="icon-time"></i></a>
764
768
  <input class="sd-line-input__input" type="text">
765
769
  </div>
package/dist/playgrounds/list-item-test.html CHANGED
@@ -64,7 +64,7 @@
64
64
  </div>
65
65
  <div class="dropdown" dropdown="">
66
66
  <button class="dropdown__toggle navbtn navbtn--text-only dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">Monitoring<span class="dropdown__caret"></span></button>
67
- <ul class="dropdown__menu scrollable" style="">
67
+ <ul class="dropdown__menu scrollable">
68
68
  <li><div class="dropdown__menu-label ng-binding">Monitoring</div></li>
69
69
  <li><button>Incoming stage</button></li>
70
70
  <li><button>Working stage</button></li>
package/dist/playgrounds/master-desk.html CHANGED
@@ -40,10 +40,8 @@
40
40
  </ul>
41
41
  </div>
42
42
  </div>
43
-
44
-
45
-
46
43
  </header>
44
+
47
45
  <section class="sd-content sd-content-wrapper">
48
46
  <div class="sd-sidebar-menu sd-content-wrapper__left-tabs">
49
47
  <ul class="authoring-active">
package/dist/playgrounds/photo-desk.html CHANGED
@@ -55,9 +55,9 @@
55
55
  </li>
56
56
  </ul>
57
57
  </div>
58
- <div id="leftContent" ng-init="darkUI = true; gridView = true" class="sd-page-content__content-block sd-page-content__content-block--main" ng-class="{'open-filters': leftFilterOpen, 'open-preview': leftPreviewOpen, 'dark-ui': darkUI}">
58
+ <div id="leftContent" ng-init="darkUI = true; gridView = true" class="sd-page-content__content-block sd-page-content__content-block--main" ng-class="{'open-filters': leftFilterOpen, 'open-preview': leftPreviewOpen}">
59
59
  <!-- left content -->
60
- <div class="subnav" ng-class="{'subnav--dark-ui': darkUI}">
60
+ <div class="subnav">
61
61
  <div class="subnav__sliding-toolbar" ng-show="select1 || select2 || select3 || select4 || select5 || select6 || select7 || select8">
62
62
  <div class="sliding-toolbar__inner">
63
63
  <a class="btn" ng-click="select1 = false; select2 = false; select3 = false; select4 = false; select5 = false; select6 = false; select7 = false; select8 = false">Cancel</a>
@@ -124,7 +124,7 @@
124
124
  </ul>
125
125
  </div>
126
126
  </div>
127
- <div class="subnav" ng-class="{'subnav--dark-ui': darkUI}">
127
+ <div class="subnav">
128
128
  <button class="navbtn navbtn--left navbtn--darker" ng-click="leftFilterOpen = !leftFilterOpen" ng-class="{'navbtn--active': leftFilterOpen}">
129
129
  <i class="icon-filter-large"></i>
130
130
  </button>
@@ -526,7 +526,7 @@
526
526
 
527
527
  <!-- List item view -->
528
528
 
529
- <div class="sd-list-item-group sd-list-item-group--space-between-items" ng-show="!gridView" ng-class="{'sd-list-item-group--dark-ui' : darkUI}">
529
+ <div class="sd-list-item-group sd-list-item-group--space-between-items" ng-show="!gridView">
530
530
  <!-- list item 1 -->
531
531
  <div class="sd-list-item sd-shadow--z1 locked" ng-class="{'sd-list-item--selected' : select1, 'sd-list-item--activated' : selectThis1}">
532
532
  <div class="sd-list-item__border"></div>
@@ -762,14 +762,14 @@
762
762
  </div>
763
763
  </div>
764
764
  </div>
765
- <div class="sd-preview-panel" ng-class="{'sd-preview-panel--dark-ui' : darkUI}">
766
- <div class="side-panel side-panel--shadow-right" ng-class="{'side-panel--dark-ui' : darkUI}">
765
+ <div class="sd-preview-panel">
766
+ <div class="side-panel side-panel--shadow-right">
767
767
  <div class="side-panel__header">
768
768
  <div class="side-panel__tools">
769
769
  <a class="icn-btn" sd-tooltip="Edit details" flow="top" ng-click="editorOpen = true; leftPreviewOpen = false"><i class="icon-pencil"></i></a>
770
770
  <a class="icn-btn" sd-tooltip="Close details" flow="top" ng-click="leftPreviewOpen = !leftPreviewOpen; selectThis1 = !selectThis1"><i class="icon-close-small"></i></a>
771
771
  </div>
772
- <ul class="nav-tabs" ng-class="{'nav-tabs--ui-dark' : darkUI}">
772
+ <ul class="nav-tabs">
773
773
  <li ng-class="{'nav-tabs__tab--active': !tab || tab === 'event-details'}" class="nav-tabs__tab">
774
774
  <button ng-click="tab = 'event-details'" class="nav-tabs__link"><span translate="">Content</span></button>
775
775
  </li>
@@ -916,7 +916,7 @@
916
916
  </footer>
917
917
 
918
918
  <!-- Image Edit modal -->
919
- <div sd-modal data-model="imageModal" class="modal--fullscreen modal--dark-ui" ng-init="showMetadata = true">
919
+ <div sd-modal data-model="imageModal" class="modal--fullscreen" ng-init="showMetadata = true" data-theme="dark-ui">
920
920
  <div class="modal__header modal__header--flex">
921
921
  <div class="modal__sliding-toolbar" ng-show="!contentChanged">
922
922
  <div class="sliding-toolbar__inner"></div>
@@ -930,7 +930,7 @@
930
930
  <button class="button-nav__btn" ng-click="nav = 'crop'; showMetadata = false" ng-class="{'button-nav__btn--active': nav === 'crop'}">Edit crops</button>
931
931
  </div>
932
932
  <div class="modal__header-buttons modal__header-buttons--right">
933
- <button class="btn btn--ui-dark btn--hollow" ng-click="this.$parent.$parent.$parent.multiEdit = false; closeModal('imageModal')">Close</button>
933
+ <button class="btn btn--hollow" ng-click="this.$parent.$parent.$parent.multiEdit = false; closeModal('imageModal')">Close</button>
934
934
  <!-- <a class="icn-btn" ng-click="this.$parent.$parent.$parent.multiEdit = false; closeModal('imageModal')">
935
935
  <i class="icon-close-small"></i>
936
936
  </a> -->
@@ -950,7 +950,7 @@
950
950
  </div>
951
951
  <!-- THUMBS for Multiedit -->
952
952
  <div class="sd-photo-preview__thumb-strip" ng-hide="!multiEdit">
953
- <div class="sd-grid-list dark-ui">
953
+ <div class="sd-grid-list">
954
954
  <!-- small item 1 -->
955
955
  <div class="sd-grid-item sd-grid-item--with-click" ng-click="select11 = !select11" ng-class="{'sd-grid-item--selected' : select11}">
956
956
  <div class="sd-grid-item__thumb">
@@ -1036,7 +1036,7 @@
1036
1036
  <!-- END THUMBS for Multiedit -->
1037
1037
  <!-- THUMBS for EDIT Crops -->
1038
1038
  <div class="sd-photo-preview__thumb-strip" ng-show="nav === 'crop'">
1039
- <div class="sd-grid-list dark-ui">
1039
+ <div class="sd-grid-list">
1040
1040
  <!-- small item 1 -->
1041
1041
  <div class="sd-grid-item sd-grid-item--with-click">
1042
1042
  <div class="sd-grid-item__thumb">
@@ -1078,7 +1078,7 @@
1078
1078
  <!-- END THUMBS for EDIT Crops -->
1079
1079
  </div>
1080
1080
  </div>
1081
- <div class="sd-column-box__slide-in-column sd-column-box__slide-in-column--large sd-column-box__slide-in-column--dark-ui" ng-class="{'sd-column-box__slide-in-column--closed' : !showMetadata}">
1081
+ <div class="sd-column-box__slide-in-column sd-column-box__slide-in-column--large" ng-class="{'sd-column-box__slide-in-column--closed' : !showMetadata}">
1082
1082
  <div class="sd-column-box__slide-in-column-inner sd-slide-in-panel">
1083
1083
 
1084
1084
  <div class="sd-slide-in-panel__header">
@@ -1088,34 +1088,34 @@
1088
1088
  <div class="sd-slide-in-panel__content">
1089
1089
  <div class="sd-slide-in-panel__content-block sd-slide-in-panel__content-block--first">
1090
1090
  <div class="form__row">
1091
- <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed">
1091
+ <div class="sd-line-input sd-line-input--boxed">
1092
1092
  <label class="sd-line-input__label">Title</label>
1093
1093
  <input class="sd-line-input__input" type="text" value="Image title" >
1094
1094
  <div class="sd-line-input__hint">Hendrerit in vulputate velit esse molestie consequat.</div>
1095
1095
  </div>
1096
1096
  </div>
1097
1097
  <div class="form__row">
1098
- <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed">
1098
+ <div class="sd-line-input sd-line-input--boxed">
1099
1099
  <label class="sd-line-input__label">Description</label>
1100
1100
  <textarea class="sd-line-input__input"></textarea>
1101
1101
  </div>
1102
1102
  </div>
1103
1103
  <div class="form__row">
1104
- <div class="sd-line-input sd-line-input--with-button sd-line-input--dark-ui sd-line-input--boxed">
1104
+ <div class="sd-line-input sd-line-input--with-button sd-line-input--boxed">
1105
1105
  <span class="sd-line-input__plus-btn"></span>
1106
1106
  <label class="sd-line-input__label">Category</label>
1107
1107
  <input class="sd-line-input__input" type="text">
1108
1108
  </div>
1109
1109
  </div>
1110
1110
  <div class="form__row">
1111
- <div class="sd-line-input sd-line-input--with-button sd-line-input--dark-ui sd-line-input--boxed">
1111
+ <div class="sd-line-input sd-line-input--with-button sd-line-input--boxed">
1112
1112
  <span class="sd-line-input__plus-btn"></span>
1113
1113
  <label class="sd-line-input__label">Subject</label>
1114
1114
  <input class="sd-line-input__input" type="text">
1115
1115
  </div>
1116
1116
  </div>
1117
1117
  <div class="form__row">
1118
- <div class="sd-line-input sd-line-input--is-select sd-line-input--dark-ui sd-line-input--boxed">
1118
+ <div class="sd-line-input sd-line-input--is-select sd-line-input--boxed">
1119
1119
  <label class="sd-line-input__label">Usage right</label>
1120
1120
  <select class="sd-line-input__select">
1121
1121
  <option value="">--- Not selected ---</option>
@@ -1185,13 +1185,13 @@
1185
1185
 
1186
1186
 
1187
1187
  <!-- //////////////////////////////////////////////////////////////////////// mage Upload modal //////////////////////////////////////////////////////////////////////// -->
1188
- <div sd-modal data-model="uploadModal" class="modal--fullscreen modal--dark-ui" ng-init="showMetadata = true">
1189
- <div class="modal__header modal__header--flex">
1188
+ <div sd-modal data-model="uploadModal" class="modal--fullscreen" ng-init="showMetadata = true">
1189
+ <div class="modal__header modal__header--flex" data-theme="dark-ui">
1190
1190
  <h3 class="modal__heading modal__heading--no-grow">Upload media</h3>
1191
1191
  <div class="modal__header-element-grow"></div>
1192
1192
  <div class="modal__header-buttons modal__header-buttons--right">
1193
- <button class="btn btn--ui-dark btn--hollow" ng-click="this.$parent.$parent.$parent.multiEdit = false; closeModal('uploadModal')">Cancel</button>
1194
- <div class="dropdown dropdown--dark" dropdown is-open="isOpen">
1193
+ <button class="btn btn--hollow" ng-click="this.$parent.$parent.$parent.multiEdit = false; closeModal('uploadModal')">Cancel</button>
1194
+ <div class="dropdown dropdown--boxed" dropdown is-open="isOpen">
1195
1195
  <button class="dropdown__toggle dropdown__toggle--small dropdown__toggle--hollow dropdown-toggle" dropdown__toggle aria-haspopup="true" aria-expanded="false">
1196
1196
  <span class="dropdown__button-label">Send to:</span> <span>National</span><b class="dropdown__caret white"></b>
1197
1197
  </button>
@@ -1202,10 +1202,10 @@
1202
1202
  <li><button ng-click="">Lifestyle</button></li>
1203
1203
  </ul>
1204
1204
  </div>
1205
- <button class="btn btn--ui-dark btn--hollow btn--primary">Upload</button>
1205
+ <button class="btn btn--hollow btn--primary">Upload</button>
1206
1206
  </div>
1207
1207
  </div>
1208
- <div class="modal__body modal__body--no-padding">
1208
+ <div class="modal__body modal__body--no-padding" data-theme="dark-ui">
1209
1209
  <div class="sd-column-box--2">
1210
1210
  <div class="sd-column-box__main-column sd-column-box__main-column--photo-preview">
1211
1211
  <a class="sd-photo-preview__slide-in-button" ng-show="!showMetadata" ng-click="showMetadata = !showMetadata" data-sd-tooltip="Open metadata" data-flow="left">
@@ -1214,19 +1214,19 @@
1214
1214
  <div class="sd-photo-preview sd-photo-preview--grid-only">
1215
1215
  <!-- THUMBS for Multiedit -->
1216
1216
  <div class="sd-photo-preview__thumb-controls">
1217
- <button class="btn btn--ui-dark btn--text-only">deselect all</button>
1218
- <button class="btn btn--ui-dark btn--text-only" disabled>select all</button>
1217
+ <button class="btn btn--text-only">deselect all</button>
1218
+ <button class="btn btn--text-only" disabled>select all</button>
1219
1219
  </div>
1220
1220
  <div class="sd-photo-preview__thumb-strip" ng-class="{'sd-photo-preview__thumb-strip--with-controls' : itemsLoaded}" ng-init="itemsLoaded = true;">
1221
1221
  <div class="upload__info" ng-if="!itemsLoaded">
1222
1222
  <div class="upload__info-icon"></div>
1223
1223
  <h3 class="upload__info-heading">Drag Your Files Here</h3>
1224
1224
  <div class="upload__info-label">or</div>
1225
- <button class="btn btn--hollow btn--ui-dark upload__info-button">Select them from folder</button>
1225
+ <button class="btn btn--hollow upload__info-button">Select them from folder</button>
1226
1226
  </div>
1227
1227
  <div class="upload__target" ng-if="!itemsLoaded"></div>
1228
1228
 
1229
- <div class="sd-grid-list dark-ui" ng-if="itemsLoaded" ng-init="select11 = true; select12 = true; select13 = true; select14 = true;">
1229
+ <div class="sd-grid-list" ng-if="itemsLoaded" ng-init="select11 = true; select12 = true; select13 = true; select14 = true;">
1230
1230
  <!-- small item 1 -->
1231
1231
  <div class="sd-grid-item sd-grid-item--with-click" ng-click="select11 = !select11" ng-class="{'sd-grid-item--selected' : select11}">
1232
1232
  <div class="sd-grid-item__thumb">
@@ -1351,7 +1351,7 @@
1351
1351
  </div>
1352
1352
  </div>
1353
1353
  <!-- Sidebar -->
1354
- <div class="sd-column-box__slide-in-column sd-column-box__slide-in-column--large sd-column-box__slide-in-column--dark-ui" ng-class="{'sd-column-box__slide-in-column--closed' : !showMetadata}" ng-if="itemsLoaded">
1354
+ <div class="sd-column-box__slide-in-column sd-column-box__slide-in-column--large" ng-class="{'sd-column-box__slide-in-column--closed' : !showMetadata}" ng-if="itemsLoaded">
1355
1355
  <div class="sd-column-box__slide-in-column-inner sd-slide-in-panel">
1356
1356
 
1357
1357
  <div class="sd-slide-in-panel__header">
@@ -1363,32 +1363,32 @@
1363
1363
  <span translate="">Currently editing: 4 items</span>
1364
1364
  </div>
1365
1365
  <div class="form__row">
1366
- <div class="sd-line-input sd-line-input--dark-ui sd-line-input--boxed">
1366
+ <div class="sd-line-input sd-line-input--boxed">
1367
1367
  <label class="sd-line-input__label">Title</label>
1368
1368
  <input class="sd-line-input__input" type="text" value="Image title" >
1369
1369
  <div class="sd-line-input__hint">Hendrerit in vulputate velit esse molestie consequat.</div>
1370
1370
  </div>
1371
1371
  </div>
1372
1372
  <div class="form__row">
1373
- <div class="sd-line-input sd-line-input--no-margin sd-line-input--dark-ui sd-line-input--boxed">
1373
+ <div class="sd-line-input sd-line-input--no-margin sd-line-input--boxed">
1374
1374
  <label class="sd-line-input__label">Description</label>
1375
1375
  <textarea class="sd-line-input__input"></textarea>
1376
1376
  </div>
1377
1377
  </div>
1378
1378
  <div class="form__row">
1379
- <div class="sd-line-input sd-line-input--no-margin sd-line-input--dark-ui sd-line-input--boxed">
1379
+ <div class="sd-line-input sd-line-input--no-margin sd-line-input--boxed">
1380
1380
  <label class="sd-line-input__label">Category</label>
1381
1381
  <input class="sd-line-input__input" type="text">
1382
1382
  </div>
1383
1383
  </div>
1384
1384
  <div class="form__row">
1385
- <div class="sd-line-input sd-line-input--no-margin sd-line-input--dark-ui sd-line-input--boxed">
1385
+ <div class="sd-line-input sd-line-input--no-margin sd-line-input--boxed">
1386
1386
  <label class="sd-line-input__label">Subject</label>
1387
1387
  <input class="sd-line-input__input" type="text">
1388
1388
  </div>
1389
1389
  </div>
1390
1390
  <div class="form__row">
1391
- <div class="sd-line-input sd-line-input--no-margin sd-line-input--is-select sd-line-input--dark-ui sd-line-input--boxed">
1391
+ <div class="sd-line-input sd-line-input--no-margin sd-line-input--is-select sd-line-input--boxed">
1392
1392
  <label class="sd-line-input__label">Usage right</label>
1393
1393
  <select class="sd-line-input__select">
1394
1394
  <option value="">--- Not selected ---</option>