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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (402) hide show
  1. package/app/img/spinner.svg +3 -0
  2. package/app/img/themes/theme-base.svg +1 -0
  3. package/app/img/themes/theme-contrast.svg +45 -0
  4. package/app/img/themes/theme-dark.svg +1 -0
  5. package/app/img/themes/theme-light.svg +1 -0
  6. package/app/index.js +1 -1
  7. package/app/scripts/modals.js +22 -9
  8. package/app/styles/_accessibility.scss +311 -4
  9. package/app/styles/_alerts.scss +57 -19
  10. package/app/styles/_avatar.scss +25 -1
  11. package/app/styles/_badge.scss +2 -2
  12. package/app/styles/_big-icon-font.scss +1 -1
  13. package/app/styles/_boxed-list.scss +38 -18
  14. package/app/styles/_buttons.scss +431 -332
  15. package/app/styles/_carousel.scss +17 -11
  16. package/app/styles/_design-tokens.scss +2 -0
  17. package/app/styles/_helpers.scss +186 -30
  18. package/app/styles/_icon-font.scss +1 -1
  19. package/app/styles/_labels.scss +12 -6
  20. package/app/styles/_loaders.scss +13 -0
  21. package/app/styles/_master-desk.scss +5 -5
  22. package/app/styles/_mixins.scss +13 -3
  23. package/app/styles/_modals.scss +4 -28
  24. package/app/styles/_normalize.scss +1 -0
  25. package/app/styles/_panel-info.scss +19 -14
  26. package/app/styles/_sd-tag-input.scss +104 -3
  27. package/app/styles/_simple-list.scss +39 -17
  28. package/app/styles/_spinner.scss +46 -0
  29. package/app/styles/_tabs.scss +6 -8
  30. package/app/styles/_tag-labels.scss +11 -2
  31. package/app/styles/_thumb-carousel.scss +11 -10
  32. package/app/styles/_toggle-box.scss +46 -12
  33. package/app/styles/_toggle-button.scss +42 -0
  34. package/app/styles/_tooltips.scss +3 -3
  35. package/app/styles/_variables.scss +0 -1
  36. package/app/styles/app.scss +9 -2
  37. package/app/styles/components/_card-item.scss +33 -21
  38. package/app/styles/components/_list-item.scss +9 -4
  39. package/app/styles/components/_sd-dropzone.scss +78 -0
  40. package/app/styles/components/_sd-grid-item.scss +2 -2
  41. package/app/styles/components/_sd-searchbar.scss +5 -98
  42. package/app/styles/components/_subnav.scss +83 -61
  43. package/app/styles/components/_theme-selector.scss +189 -0
  44. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  45. package/app/styles/{variables → design-tokens}/_new-colors.scss +34 -20
  46. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  47. package/app/styles/editor/_editor-buttons.scss +54 -0
  48. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  49. package/app/styles/form-elements/_checkbox.scss +85 -58
  50. package/app/styles/form-elements/_forms-general.scss +90 -14
  51. package/app/styles/form-elements/_inputs.scss +22 -3
  52. package/app/styles/form-elements/_select-grid.scss +79 -0
  53. package/app/styles/grids/_basic-grid.scss +52 -26
  54. package/app/styles/grids/_grid-layout.scss +35 -21
  55. package/app/styles/grids/_layout-grid.scss +4 -4
  56. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  57. package/app/styles/interface-elements/_side-panel.scss +87 -58
  58. package/app/styles/layout/_basic-layout.scss +1 -4
  59. package/app/styles/layout/_container.scss +32 -0
  60. package/app/styles/layout/_editor.scss +306 -0
  61. package/app/styles/menus/_sd-left-navigation.scss +14 -2
  62. package/app/styles/menus/_sd-sidebar-menu.scss +102 -9
  63. package/app/styles/pr-superdesk-theme.scss +3 -0
  64. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  65. package/app/styles/primereact/_pr-dropdown.scss +157 -8
  66. package/app/styles/primereact/_pr-general.scss +4 -0
  67. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  68. package/app/styles/variables/_colors.scss +2 -452
  69. package/app/styles/variables/_dimensions.scss +85 -1
  70. package/app/styles/variables/_form-elements.scss +0 -2
  71. package/app-typescript/components/Alert.tsx +16 -1
  72. package/app-typescript/components/Avatar.tsx +21 -0
  73. package/app-typescript/components/Button.tsx +7 -1
  74. package/app-typescript/components/ButtonGroup.tsx +5 -4
  75. package/app-typescript/components/Carousel.tsx +1 -1
  76. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  77. package/app-typescript/components/CheckGroup.tsx +2 -1
  78. package/app-typescript/components/Checkbox.tsx +7 -3
  79. package/app-typescript/components/CheckboxButton.tsx +9 -2
  80. package/app-typescript/components/DatePicker.tsx +6 -2
  81. package/app-typescript/components/DropZone.tsx +89 -0
  82. package/app-typescript/components/Dropdown.tsx +9 -1
  83. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  84. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  85. package/app-typescript/components/Form/FormItem.tsx +20 -0
  86. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  87. package/app-typescript/components/Form/FormRow.tsx +40 -0
  88. package/app-typescript/components/Form/FormText.tsx +15 -0
  89. package/app-typescript/components/Form/index.tsx +5 -0
  90. package/app-typescript/components/IconButton.tsx +26 -12
  91. package/app-typescript/components/IconPicker.tsx +277 -0
  92. package/app-typescript/components/Input.tsx +41 -8
  93. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  94. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  95. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  96. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  97. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  98. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  99. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  100. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  101. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  102. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  103. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  104. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  105. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  106. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  107. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  108. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  109. package/app-typescript/components/Layouts/Container.tsx +30 -0
  110. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  111. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  112. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  113. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  114. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  115. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  116. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  117. package/app-typescript/components/Layouts/index.tsx +25 -0
  118. package/app-typescript/components/LeftMenu.tsx +123 -49
  119. package/app-typescript/components/ListItemLoader.tsx +30 -0
  120. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  121. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  122. package/app-typescript/components/Lists/index.tsx +2 -0
  123. package/app-typescript/components/Modal.tsx +1 -1
  124. package/app-typescript/components/MultiSelect.tsx +69 -0
  125. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  126. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  127. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  128. package/app-typescript/components/Navigation/index.tsx +3 -0
  129. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  130. package/app-typescript/components/RadioGroup.tsx +69 -0
  131. package/app-typescript/components/Select.tsx +12 -4
  132. package/app-typescript/components/SelectGrid.tsx +233 -0
  133. package/app-typescript/components/Skeleton.tsx +48 -0
  134. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  135. package/app-typescript/components/Spinner.tsx +32 -0
  136. package/app-typescript/components/SubNav.tsx +25 -4
  137. package/app-typescript/components/Switch.tsx +34 -12
  138. package/app-typescript/components/Tag.tsx +31 -7
  139. package/app-typescript/components/Text/Heading.tsx +67 -0
  140. package/app-typescript/components/Text/Text.tsx +36 -0
  141. package/app-typescript/components/ThemeSelector.tsx +113 -0
  142. package/app-typescript/components/Togglebox.tsx +8 -6
  143. package/app-typescript/components/TreeSelect.tsx +330 -0
  144. package/app-typescript/index.ts +19 -3
  145. package/dist/avatar-2.jpg +0 -0
  146. package/dist/avatar-3.jpg +0 -0
  147. package/dist/avatar-4.jpg +0 -0
  148. package/dist/avatar-5.jpg +0 -0
  149. package/dist/avatar-6.jpg +0 -0
  150. package/dist/components/basic-grid.html +1 -1
  151. package/dist/components/checkbox.html +1 -1
  152. package/dist/components/modals.html +1 -0
  153. package/dist/examples.bundle.css +99 -1225
  154. package/dist/examples.bundle.js +24704 -15626
  155. package/dist/playgrounds/boxed-list.html +1 -1
  156. package/dist/playgrounds/cards.html +9 -4
  157. package/dist/playgrounds/editor-3-test.html +15 -0
  158. package/dist/playgrounds/form-layout.html +9 -7
  159. package/dist/playgrounds/master-desk.html +1 -3
  160. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  161. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  162. package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
  163. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  164. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  165. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  166. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  167. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  168. package/dist/react/Alerts.tsx +91 -18
  169. package/dist/react/Avatar.tsx +314 -127
  170. package/dist/react/BoxedList.tsx +362 -0
  171. package/dist/react/ButtonGroups.tsx +66 -65
  172. package/dist/react/Buttons.tsx +65 -113
  173. package/dist/react/Carousel.tsx +2 -3
  174. package/dist/react/Checkboxs.tsx +66 -25
  175. package/dist/react/Container.tsx +143 -0
  176. package/dist/react/DropZone.tsx +103 -0
  177. package/dist/react/Heading.tsx +106 -0
  178. package/dist/react/IconButtons.tsx +51 -21
  179. package/dist/react/IconFont.tsx +7 -6
  180. package/dist/react/IconPicker.tsx +65 -0
  181. package/dist/react/Index.tsx +100 -19
  182. package/dist/react/Inputs.tsx +9 -3
  183. package/dist/react/LeftNavigations.tsx +161 -9
  184. package/dist/react/ListItems.tsx +34 -0
  185. package/dist/react/Modal.tsx +7 -7
  186. package/dist/react/MultiSelect.tsx +193 -0
  187. package/dist/react/NavButtons.tsx +4 -4
  188. package/dist/react/Panel.tsx +366 -0
  189. package/dist/react/QuickNavigationBar.tsx +142 -0
  190. package/dist/react/RadioGroup.tsx +351 -0
  191. package/dist/react/SelectGrid.tsx +121 -0
  192. package/dist/react/Selects.tsx +2 -0
  193. package/dist/react/SimpleList.tsx +148 -0
  194. package/dist/react/SubNav.tsx +65 -18
  195. package/dist/react/Tags.tsx +57 -5
  196. package/dist/react/Text.tsx +134 -0
  197. package/dist/react/TreeSelect.tsx +178 -0
  198. package/dist/react.html +4 -0
  199. package/dist/superdesk-ui.bundle.css +26706 -20044
  200. package/dist/superdesk-ui.bundle.js +8456 -3426
  201. package/dist/vendor.bundle.js +13677 -13655
  202. package/examples/css/docs-page.css +98 -27
  203. package/examples/img/avatar-2.jpg +0 -0
  204. package/examples/img/avatar-3.jpg +0 -0
  205. package/examples/img/avatar-4.jpg +0 -0
  206. package/examples/img/avatar-5.jpg +0 -0
  207. package/examples/img/avatar-6.jpg +0 -0
  208. package/examples/index.js +16 -0
  209. package/examples/pages/components/basic-grid.html +1 -1
  210. package/examples/pages/components/checkbox.html +1 -1
  211. package/examples/pages/components/modals.html +1 -0
  212. package/examples/pages/playgrounds/boxed-list.html +1 -1
  213. package/examples/pages/playgrounds/cards.html +9 -4
  214. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  215. package/examples/pages/playgrounds/form-layout.html +9 -7
  216. package/examples/pages/playgrounds/master-desk.html +1 -3
  217. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  218. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  219. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
  220. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  221. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  222. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  223. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  224. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  225. package/examples/pages/react/Alerts.tsx +91 -18
  226. package/examples/pages/react/Avatar.tsx +314 -127
  227. package/examples/pages/react/BoxedList.tsx +362 -0
  228. package/examples/pages/react/ButtonGroups.tsx +66 -65
  229. package/examples/pages/react/Buttons.tsx +65 -113
  230. package/examples/pages/react/Carousel.tsx +2 -3
  231. package/examples/pages/react/Checkboxs.tsx +66 -25
  232. package/examples/pages/react/Container.tsx +143 -0
  233. package/examples/pages/react/DropZone.tsx +103 -0
  234. package/examples/pages/react/Heading.tsx +106 -0
  235. package/examples/pages/react/IconButtons.tsx +51 -21
  236. package/examples/pages/react/IconFont.tsx +7 -6
  237. package/examples/pages/react/IconPicker.tsx +65 -0
  238. package/examples/pages/react/Index.tsx +100 -19
  239. package/examples/pages/react/Inputs.tsx +9 -3
  240. package/examples/pages/react/LeftNavigations.tsx +161 -9
  241. package/examples/pages/react/ListItems.tsx +34 -0
  242. package/examples/pages/react/Modal.tsx +7 -7
  243. package/examples/pages/react/MultiSelect.tsx +193 -0
  244. package/examples/pages/react/NavButtons.tsx +4 -4
  245. package/examples/pages/react/Panel.tsx +366 -0
  246. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  247. package/examples/pages/react/RadioGroup.tsx +351 -0
  248. package/examples/pages/react/SelectGrid.tsx +121 -0
  249. package/examples/pages/react/Selects.tsx +2 -0
  250. package/examples/pages/react/SimpleList.tsx +148 -0
  251. package/examples/pages/react/SubNav.tsx +65 -18
  252. package/examples/pages/react/Tags.tsx +57 -5
  253. package/examples/pages/react/Text.tsx +134 -0
  254. package/examples/pages/react/TreeSelect.tsx +178 -0
  255. package/examples/pages/react.html +4 -0
  256. package/package.json +9 -5
  257. package/react/components/Alert.d.ts +3 -0
  258. package/react/components/Alert.js +9 -1
  259. package/react/components/Avatar.d.ts +9 -0
  260. package/react/components/Avatar.js +19 -1
  261. package/react/components/Button.d.ts +2 -0
  262. package/react/components/Button.js +4 -2
  263. package/react/components/ButtonGroup.d.ts +3 -2
  264. package/react/components/ButtonGroup.js +2 -2
  265. package/react/components/Carousel.js +1 -1
  266. package/react/components/CheckButtonGroup.d.ts +3 -1
  267. package/react/components/CheckButtonGroup.js +8 -2
  268. package/react/components/CheckGroup.d.ts +1 -0
  269. package/react/components/CheckGroup.js +1 -1
  270. package/react/components/Checkbox.d.ts +2 -1
  271. package/react/components/Checkbox.js +2 -2
  272. package/react/components/CheckboxButton.d.ts +1 -0
  273. package/react/components/CheckboxButton.js +2 -2
  274. package/react/components/DatePicker.js +7 -2
  275. package/react/components/DropZone.d.ts +25 -0
  276. package/react/components/DropZone.js +93 -0
  277. package/react/components/Dropdown.d.ts +1 -0
  278. package/react/components/Dropdown.js +3 -3
  279. package/react/components/Form/FormGroup.d.ts +13 -0
  280. package/react/components/Form/FormGroup.js +61 -0
  281. package/react/components/Form/FormItem.d.ts +9 -0
  282. package/react/components/Form/FormItem.js +54 -0
  283. package/react/components/Form/FormLabel.d.ts +10 -0
  284. package/react/components/Form/FormLabel.js +54 -0
  285. package/react/components/Form/FormRow.d.ts +17 -0
  286. package/react/components/Form/FormRow.js +62 -0
  287. package/react/components/Form/FormText.d.ts +8 -0
  288. package/react/components/Form/FormText.js +47 -0
  289. package/react/components/Form/index.d.ts +5 -0
  290. package/react/components/Form/index.js +12 -0
  291. package/react/components/IconButton.d.ts +9 -2
  292. package/react/components/IconButton.js +13 -5
  293. package/react/components/IconPicker.d.ts +24 -0
  294. package/react/components/IconPicker.js +283 -0
  295. package/react/components/Input.d.ts +20 -3
  296. package/react/components/Input.js +12 -3
  297. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  298. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  299. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  300. package/react/components/Layouts/AuthoringFrame.js +56 -0
  301. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  302. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  303. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  304. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  305. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  306. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  307. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  308. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  309. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  310. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  311. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  312. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  313. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  314. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  315. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  316. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  317. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  318. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  319. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  320. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  321. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  322. package/react/components/Layouts/AuthoringMain.js +53 -0
  323. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  324. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  325. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  326. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  327. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  328. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  329. package/react/components/Layouts/Container.d.ts +14 -0
  330. package/react/components/Layouts/Container.js +60 -0
  331. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  332. package/react/components/Layouts/HeaderPanel.js +47 -0
  333. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  334. package/react/components/Layouts/LayoutContainer.js +47 -0
  335. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  336. package/react/components/Layouts/LeftPanel.js +54 -0
  337. package/react/components/Layouts/MainPanel.d.ts +10 -0
  338. package/react/components/Layouts/MainPanel.js +50 -0
  339. package/react/components/Layouts/PageLayout.d.ts +16 -0
  340. package/react/components/Layouts/PageLayout.js +64 -0
  341. package/react/components/Layouts/Panel.d.ts +65 -0
  342. package/react/components/Layouts/Panel.js +166 -0
  343. package/react/components/Layouts/RightPanel.d.ts +9 -0
  344. package/react/components/Layouts/RightPanel.js +47 -0
  345. package/react/components/Layouts/index.d.ts +24 -0
  346. package/react/components/Layouts/index.js +55 -0
  347. package/react/components/LeftMenu.d.ts +8 -3
  348. package/react/components/LeftMenu.js +55 -16
  349. package/react/components/ListItemLoader.d.ts +4 -0
  350. package/react/components/ListItemLoader.js +62 -0
  351. package/react/components/Lists/BoxedList.d.ts +36 -0
  352. package/react/components/Lists/BoxedList.js +137 -0
  353. package/react/components/Lists/SimpleList.d.ts +21 -0
  354. package/react/components/Lists/SimpleList.js +78 -0
  355. package/react/components/Lists/index.d.ts +2 -0
  356. package/react/components/Lists/index.js +9 -0
  357. package/react/components/Modal.js +1 -1
  358. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  359. package/react/components/Navigation/QuickNavBar.js +113 -0
  360. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  361. package/react/components/Navigation/SideBarMenu.js +77 -0
  362. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  363. package/react/components/Navigation/SideBarTabs.js +82 -0
  364. package/react/components/Navigation/index.d.ts +3 -0
  365. package/react/components/Navigation/index.js +8 -0
  366. package/react/components/RadioButtonGroup.d.ts +29 -0
  367. package/react/components/RadioButtonGroup.js +89 -0
  368. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  369. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  370. package/react/components/Select.d.ts +3 -1
  371. package/react/components/Select.js +5 -3
  372. package/react/components/SelectGrid.d.ts +45 -0
  373. package/react/components/SelectGrid.js +179 -0
  374. package/react/components/Skeleton.d.ts +30 -0
  375. package/react/components/Skeleton.js +55 -0
  376. package/react/components/SlidingToolbar.d.ts +1 -1
  377. package/react/components/SlidingToolbar.js +11 -1
  378. package/react/components/Spinner.d.ts +11 -0
  379. package/react/components/Spinner.js +69 -0
  380. package/react/components/SubNav.d.ts +8 -1
  381. package/react/components/SubNav.js +22 -4
  382. package/react/components/Switch.d.ts +4 -1
  383. package/react/components/Switch.js +19 -7
  384. package/react/components/TabCustom.d.ts +0 -1
  385. package/react/components/Tag.d.ts +3 -2
  386. package/react/components/Tag.js +16 -5
  387. package/react/components/TagInput.d.ts +0 -1
  388. package/react/components/Text/Heading.d.ts +15 -0
  389. package/react/components/Text/Heading.js +77 -0
  390. package/react/components/Text/Text.d.ts +15 -0
  391. package/react/components/Text/Text.js +65 -0
  392. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  393. package/react/components/ThemeSelector.js +112 -0
  394. package/react/components/Togglebox.d.ts +1 -0
  395. package/react/components/Togglebox.js +9 -2
  396. package/react/index.d.ts +17 -3
  397. package/react/index.js +40 -4
  398. package/app/styles/variables/_design-tokens-general.scss +0 -136
  399. package/app-typescript/components/Radio.tsx +0 -57
  400. package/app-typescript/components/RadioButton.tsx +0 -57
  401. package/dist/react/Radios.tsx +0 -391
  402. package/examples/pages/react/Radios.tsx +0 -391
@@ -1,6 +1,7 @@
1
1
 
2
2
  $button-margin: 0 !default;
3
- $button-opacity-disabled: 0.25 !default;
3
+ $button-opacity-disabled: 0.60 !default;
4
+ $icn-button-opacity-disabled: 0.40 !default;
4
5
 
5
6
  // /// transitions for buttons.
6
7
  $button-transition: all 0.2s ease-out, color 0.1s ease-out !default;
@@ -13,360 +14,420 @@ $new-button-active-shadow: inset 0 1px 2px hsla(0, 0%, 0%, 0.3);
13
14
  $new-button-active-shadow-hollow: inset 0 0 0 1px;
14
15
 
15
16
  :root {
16
- --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14);
17
+ --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14);
17
18
  }
18
19
 
19
20
  [data-theme="dark-ui"], .dark-ui {
20
- --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 1px 4px 0 rgba(0,0,0,.5);
21
+ --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 1px 4px 0 rgba(0,0,0,.5);
21
22
  }
22
23
 
23
24
  @mixin new-button-base {
24
- display: inline-flex;
25
- align-items: center;
26
- vertical-align: middle;
27
- justify-content: center;
28
- margin: $button-margin;
29
- padding-block-start: 0;
30
- padding-block-end: 0;
31
- padding-inline: $padding-x__button--default;
32
- height: $height__button--default;
33
- font-size: $font-size__button--default;
34
- -webkit-appearance: none;
35
- border: none;
36
- border-radius: $border-radius__base--small;
37
- transition: $button-transition;
38
- text-transform: uppercase;
39
- line-height: 1;
40
- font-weight: 400;
41
- letter-spacing: 0.1em;
42
- text-align: center;
43
- text-decoration: none;
44
- cursor: pointer;
45
- background-color: var(--sd-btn-bg);
46
- &:hover {
47
- background-color: var(--sd-btn-bg--hover);
48
- box-shadow: var(--new-button-hover-shadow);
49
- }
50
- &:active {
51
- background-color: var(--sd-btn-bg--active);
52
- box-shadow: $new-button-active-shadow;
53
- }
54
- &:focus-visible {
55
- box-shadow: $button-focus-box-shadow;
56
- }
57
- [class^="icon-"], [class*=" icon-"] {
58
- color: currentColor;
59
- }
25
+ display: inline-flex;
26
+ align-items: center;
27
+ vertical-align: middle;
28
+ justify-content: center;
29
+ margin: $button-margin;
30
+ padding-block-start: 0;
31
+ padding-block-end: 0;
32
+ padding-inline: $padding-x__button--default;
33
+ height: $height__button--default;
34
+ font-size: $font-size__button--default;
35
+ -webkit-appearance: none;
36
+ border: none;
37
+ border-radius: $border-radius__base--small;
38
+ transition: $button-transition;
39
+ text-transform: uppercase;
40
+ line-height: 1;
41
+ font-weight: 400;
42
+ letter-spacing: 0.1em;
43
+ text-align: center;
44
+ text-decoration: none;
45
+ cursor: pointer;
46
+ position: relative;
47
+ border: 1px solid transparent;
48
+ background-color: var(--sd-btn-bg);
49
+ gap: 0.6rem;
50
+ &:hover {
51
+ background-color: var(--sd-btn-bg--hover);
52
+ box-shadow: var(--new-button-hover-shadow);
53
+ text-decoration: none !important;
54
+ }
55
+ &:active {
56
+ background-color: var(--sd-btn-bg--active);
57
+ box-shadow: $new-button-active-shadow;
58
+ }
59
+ &:focus-visible {
60
+ box-shadow: $button-focus-box-shadow;
61
+ }
62
+ [class^="icon-"], [class*=" icon-"] {
63
+ color: currentColor;
64
+ }
60
65
  }
61
66
  @mixin new-button-hollow {
62
- border: 1px solid var(--sd-btn-border);
63
- background-color: transparent !important;
64
- box-shadow: inset 0 0 0 0px var(--sd-btn-border);
65
- [class^="icon-"], [class*=" icon-"] {
66
- color: var(--sd-btn-color);
67
- }
68
- &:hover {
69
- box-shadow: none;
70
- border-color: var(--sd-btn-color);
71
- box-shadow: inset 0 0 0 2px var(--sd-btn-border);
72
- }
73
- &:active {
74
- border-color: var(--sd-btn-color);
75
- box-shadow: inset 0 0 0 2px var(--sd-btn-color);
76
- }
77
- &:focus-visible {
78
- box-shadow: $button-focus-box-shadow;
79
- }
67
+ border: 1px solid var(--sd-btn-border);
68
+ background-color: transparent !important;
69
+ box-shadow: inset 0 0 0 0px var(--sd-btn-border);
70
+ [class^="icon-"], [class*=" icon-"] {
71
+ color: var(--sd-btn-color);
72
+ }
73
+ &:hover {
74
+ box-shadow: none;
75
+ border-color: var(--sd-btn-color);
76
+ box-shadow: inset 0 0 0 2px var(--sd-btn-border);
77
+ }
78
+ &:active {
79
+ border-color: var(--sd-btn-color);
80
+ box-shadow: inset 0 0 0 2px var(--sd-btn-color);
81
+ }
82
+ &:focus-visible {
83
+ box-shadow: $button-focus-box-shadow;
84
+ }
80
85
  }
81
86
  @mixin new-button-text-only {
82
- border: none;
83
- background-color: transparent;
84
- --sd-btn-hs: 214, 13%;
85
- --sd-btn-l: var(--sd-btn-hs), 50%;
86
- --sd-btn-txt: hsla(var(--sd-btn-l), 1);
87
- --sd-btn-bg--hover: hsla(var(--sd-btn-l), 0.20);
88
- --sd-btn-bg--active: hsla(var(--sd-btn-l), 0.16);
89
- --sd-btn-bg--shadow: hsla(var(--sd-btn-l), 0.24);
90
- [class^="icon-"], [class*=" icon-"] {
91
- color: currentColor;
92
- }
93
- &:hover {
94
- box-shadow: none;
95
- background-color: var(--sd-btn-bg--hover);
96
- box-shadow: inset 0 0 0 0 var(--sd-btn-bg--shadow);
97
- }
98
- &:active {
99
- box-shadow: none;
100
- background-color: var(--sd-btn-bg--active);
101
- box-shadow: inset 0 0 0 4px var(--sd-btn-bg--shadow);
102
- }
103
- &:focus-visible {
104
- box-shadow: $button-focus-box-shadow;
105
- }
87
+ border: none;
88
+ background-color: transparent;
89
+ --sd-btn-hs: 214, 13%;
90
+ --sd-btn-l: var(--sd-btn-hs), 50%;
91
+ --sd-btn-txt: hsla(var(--sd-btn-l), 1);
92
+ --sd-btn-bg--hover: hsla(var(--sd-btn-l), 0.20);
93
+ --sd-btn-bg--active: hsla(var(--sd-btn-l), 0.16);
94
+ --sd-btn-bg--shadow: hsla(var(--sd-btn-l), 0.24);
95
+ [class^="icon-"], [class*=" icon-"] {
96
+ color: currentColor;
97
+ }
98
+ &:hover {
99
+ box-shadow: none;
100
+ background-color: var(--sd-btn-bg--hover);
101
+ box-shadow: inset 0 0 0 0 var(--sd-btn-bg--shadow);
102
+ }
103
+ &:active {
104
+ box-shadow: none;
105
+ background-color: var(--sd-btn-bg--active);
106
+ box-shadow: inset 0 0 0 4px var(--sd-btn-bg--shadow);
107
+ }
108
+ &:focus-visible {
109
+ box-shadow: $button-focus-box-shadow;
110
+ }
106
111
  }
107
112
 
108
113
  .btn {
109
- --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
110
- --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
111
- --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
112
- color: var(--sd-colour-btn-txt-neutral);
114
+ --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
115
+ --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
116
+ --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
117
+ color: var(--sd-colour-btn-txt-neutral);
113
118
 
114
- @include new-button-base;
115
- // Sizes
116
- &--small {
117
- padding: $padding-x__button--small;
118
- height: $height__button--small;
119
- font-size: $font-size__button--small;
120
- }
121
- &--large {
122
- padding: $padding-x__button--large;
123
- height: $height__button--large;
124
- font-size: $font-size__button--large;
125
- }
126
- &--expanded {
127
- width: 100%;
128
- margin-right: 0;
129
- margin-left: 0;
130
- }
131
- [class^="icon-"], [class*=" icon-"] {
132
- margin-inline-start: -0.3rem;
133
- margin-inline-end: 0.6rem ;
134
- }
135
- // Colours
136
- &--primary, &--success, &--warning, &--alert, &--highlight, &--sd-green, &--secondary {
137
- color: $white;
119
+ @include new-button-base;
120
+ // Sizes
121
+ &--small {
122
+ padding: $padding-x__button--small;
123
+ height: $height__button--small;
124
+ font-size: $font-size__button--small;
125
+ }
126
+ &--large {
127
+ padding: $padding-x__button--large;
128
+ height: $height__button--large;
129
+ font-size: $font-size__button--large;
130
+ }
131
+ &--expanded {
132
+ width: 100%;
133
+ margin-right: 0;
134
+ margin-left: 0;
135
+ }
138
136
  [class^="icon-"], [class*=" icon-"] {
139
- color: $white;
140
- }
141
- }
142
-
143
- &--primary {
144
- --sd-btn-bg: var(--sd-colour-primary);
145
- --sd-btn-bg--hover: var(--sd-colour-primary--hover);
146
- --sd-btn-bg--active: var(--sd-colour-primary--active);
147
- }
148
-
149
- &--success {
150
- --sd-btn-bg: var(--sd-colour-success);
151
- --sd-btn-bg--hover: var(--sd-colour-success--hover);
152
- --sd-btn-bg--active: var(--sd-colour-success--active);
153
- }
137
+ margin-inline-start: -0.3rem;
138
+ }
139
+ // Colours
140
+ &--primary, &--success, &--warning, &--alert, &--highlight, &--sd-green, &--secondary {
141
+ color: $white;
142
+ [class^="icon-"], [class*=" icon-"] {
143
+ color: $white;
144
+ }
145
+ .sd-spinner__path {
146
+ stroke: $white;
147
+ }
148
+ }
149
+
150
+ &--primary {
151
+ --sd-btn-bg: var(--sd-colour-primary);
152
+ --sd-btn-bg--hover: var(--sd-colour-primary--hover);
153
+ --sd-btn-bg--active: var(--sd-colour-primary--active);
154
+ }
154
155
 
155
- &--warning {
156
- --sd-btn-bg: var(--sd-colour-warning);
157
- --sd-btn-bg--hover: var(--sd-colour-warning--hover);
158
- --sd-btn-bg--active: var(--sd-colour-warning--active);
159
- }
156
+ &--success {
157
+ --sd-btn-bg: var(--sd-colour-success);
158
+ --sd-btn-bg--hover: var(--sd-colour-success--hover);
159
+ --sd-btn-bg--active: var(--sd-colour-success--active);
160
+ }
160
161
 
161
- &--alert {
162
- --sd-btn-bg: var(--sd-colour-alert);
163
- --sd-btn-bg--hover: var(--sd-colour-alert--hover);
164
- --sd-btn-bg--active: var(--sd-colour-alert--active);
165
- }
162
+ &--warning {
163
+ --sd-btn-bg: var(--sd-colour-warning);
164
+ --sd-btn-bg--hover: var(--sd-colour-warning--hover);
165
+ --sd-btn-bg--active: var(--sd-colour-warning--active);
166
+ }
166
167
 
167
- &--highlight {
168
- --sd-btn-bg: var(--sd-colour-highlight);
169
- --sd-btn-bg--hover: var(--sd-colour-highlight--hover);
170
- --sd-btn-bg--active: var(--sd-colour-highlight--active);
171
- }
168
+ &--alert {
169
+ --sd-btn-bg: var(--sd-colour-alert);
170
+ --sd-btn-bg--hover: var(--sd-colour-alert--hover);
171
+ --sd-btn-bg--active: var(--sd-colour-alert--active);
172
+ }
172
173
 
173
- &--sd-green {
174
- --sd-btn-bg: var(--sd-colour-superdesk);
175
- --sd-btn-bg--hover: var(--sd-colour-superdesk--hover);
176
- --sd-btn-bg--active: var(--sd-colour-superdesk--active);
177
- }
174
+ &--highlight {
175
+ --sd-btn-bg: var(--sd-colour-highlight);
176
+ --sd-btn-bg--hover: var(--sd-colour-highlight--hover);
177
+ --sd-btn-bg--active: var(--sd-colour-highlight--active);
178
+ }
178
179
 
179
- &--secondary {
180
- --sd-btn-bg: var(--sd-colour-secondary);
181
- --sd-btn-bg--hover: var(--sd-colour-secondary--hover);
182
- --sd-btn-bg--active: var(--sd-colour-secondary--active);
183
- }
180
+ &--sd-green {
181
+ --sd-btn-bg: var(--sd-colour-superdesk);
182
+ --sd-btn-bg--hover: var(--sd-colour-superdesk--hover);
183
+ --sd-btn-bg--active: var(--sd-colour-superdesk--active);
184
+ }
184
185
 
185
- // Hollow style
186
- &.btn--hollow {
187
- --sd-btn-border: var(--sd-colour-btn-border-neutral);
188
- --sd-btn-color: var(--sd-colour-btn-txt-neutral);
189
- color: var(--sd-colour-btn-txt-neutral);
190
- @include new-button-hollow;
191
- &.btn--primary {
192
- --sd-btn-border: var(--sd-colour-interactive-btn-border);
193
- --sd-btn-color: var(--sd-colour-interactive);
194
- color: var(--sd-btn-color);
195
- }
196
-
197
- &.btn--success {
198
- --sd-btn-border: var(--sd-colour-success-btn-border);
199
- --sd-btn-color: var(--sd-colour-success);
200
- color: var(--sd-btn-color);
201
- }
202
-
203
- &.btn--warning {
204
- --sd-btn-border: var(--sd-colour-warning-btn-border);
205
- --sd-btn-color: var(--sd-colour-warning);
206
- color: var(--sd-btn-color);
207
- }
208
-
209
- &.btn--alert {
210
- --sd-btn-border: var(--sd-colour-alert-btn-border);
211
- --sd-btn-color: var(--sd-colour-alert);
212
- color: var(--sd-btn-color);
213
- }
214
-
215
- &.btn--highlight {
216
- --sd-btn-border: var(--sd-colour-highlight-btn-border);
217
- --sd-btn-color: var(--sd-colour-highlight);
218
- color: var(--sd-btn-color);
219
- }
220
-
221
- &.btn--sd-green {
222
- --sd-btn-border: var(--sd-colour-superdesk-btn-border);
223
- --sd-btn-color: var(--sd-colour-superdesk);
224
- color: var(--sd-btn-color);
225
- }
226
-
227
- &.btn--secondary {
228
- --sd-btn-border: var(--sd-colour-secondary-btn-border);
229
- --sd-btn-color: var(--sd-colour-secondary);
230
- color: var(--sd-btn-color);
231
- }
232
- }
233
- // Text only
234
- &.btn--text-only {
235
- --sd-btn-hs: 214, 13%;
186
+ &--secondary {
187
+ --sd-btn-bg: var(--sd-colour-secondary);
188
+ --sd-btn-bg--hover: var(--sd-colour-secondary--hover);
189
+ --sd-btn-bg--active: var(--sd-colour-secondary--active);
190
+ }
236
191
 
237
- color: var(--sd-colour-btn-txt-neutral);
238
- @include new-button-text-only;
192
+ // Hollow style
193
+ &.btn--hollow {
194
+ --sd-btn-border: var(--sd-colour-btn-border-neutral);
195
+ --sd-btn-color: var(--sd-colour-btn-txt-neutral);
196
+ color: var(--sd-colour-btn-txt-neutral);
197
+ @include new-button-hollow;
198
+ &.btn--primary {
199
+ --sd-btn-border: var(--sd-colour-interactive-btn-border);
200
+ --sd-btn-color: var(--sd-colour-interactive);
201
+ }
239
202
 
240
- &.btn--primary {
241
- --sd-btn-hs: var(--sd-colour-primary-hs);
242
- color: var(--sd-btn-txt);
243
- }
244
-
245
- &.btn--success {
246
- --sd-btn-hs: var(--sd-colour-success-hs);
247
- color: var(--sd-btn-txt);
248
- }
249
-
250
- &.btn--warning {
251
- --sd-btn-hs: var(--sd-colour-warning-hs);
252
- color: var(--sd-btn-txt);
253
- }
254
-
255
- &.btn--alert {
256
- --sd-btn-hs: var(--sd-colour-alert-hs);
257
- color: var(--sd-btn-txt);
258
- }
259
-
260
- &.btn--highlight {
261
- --sd-btn-hs: var(--sd-colour-highlight-hs);
262
- color: var(--sd-btn-txt);
263
- }
264
-
265
- &.btn--sd-green {
266
- --sd-btn-hs: var(--sd-colour-superdesk-hs);
267
- color: var(--sd-btn-txt);
268
- }
269
-
270
- &.btn--secondary {
271
- --sd-btn-hs: var(--sd-colour-secondary-hs);
272
- color: var(--color-text);
273
- }
274
- }
275
- &.btn--icon-only {
276
- [class^="icon-"], [class*=" icon-"] {
277
- margin: 0;
203
+ &.btn--success {
204
+ --sd-btn-border: var(--sd-colour-success-btn-border);
205
+ --sd-btn-color: var(--sd-colour-success);
206
+ }
207
+
208
+ &.btn--warning {
209
+ --sd-btn-border: var(--sd-colour-warning-btn-border);
210
+ --sd-btn-color: var(--sd-colour-warning);
211
+ }
212
+
213
+ &.btn--alert {
214
+ --sd-btn-border: var(--sd-colour-alert-btn-border);
215
+ --sd-btn-color: var(--sd-colour-alert);
216
+ }
217
+
218
+ &.btn--highlight {
219
+ --sd-btn-border: var(--sd-colour-highlight-btn-border);
220
+ --sd-btn-color: var(--sd-colour-highlight);
221
+ }
222
+
223
+ &.btn--sd-green {
224
+ --sd-btn-border: var(--sd-colour-superdesk-btn-border);
225
+ --sd-btn-color: var(--sd-colour-superdesk);
226
+ }
227
+
228
+ &.btn--secondary {
229
+ --sd-btn-border: var(--sd-colour-secondary-btn-border);
230
+ --sd-btn-color: var(--sd-colour-secondary);
231
+ }
232
+ &.btn--primary,
233
+ &.btn--success,
234
+ &.btn--warning,
235
+ &.btn--alert,
236
+ &.btn--highlight,
237
+ &.btn--sd-green,
238
+ &.btn--secondary {
239
+ color: var(--sd-btn-color);
240
+ .sd-spinner__path {
241
+ stroke: var(--sd-btn-color);
242
+ }
243
+ }
278
244
  }
279
- &.btn--icon-only-circle {
280
- border-radius: $border-radius__base--full;
281
- padding: 0;
282
- width: $height__button--default;
283
- &.btn--small {
284
- width: $height__button--small;
285
- }
286
- &.btn--large {
287
- width: $height__button--large;
288
- }
289
- }
290
- }
291
- &.btn--disabled, &[disabled] {
292
- opacity: 0.3;
293
- cursor: not-allowed;
294
- pointer-events: none;
295
- box-shadow: none !important;
296
- &:hover, &:active {
297
- cursor: not-allowed;
245
+ // Text only
246
+ &.btn--text-only {
247
+ --sd-btn-hs: 214, 13%;
248
+ color: var(--sd-colour-btn-txt-neutral);
249
+ @include new-button-text-only;
250
+ &.btn--primary {
251
+ --sd-btn-hs: var(--sd-colour-primary-hs);
252
+ }
253
+
254
+ &.btn--success {
255
+ --sd-btn-hs: var(--sd-colour-success-hs);
256
+ }
257
+
258
+ &.btn--warning {
259
+ --sd-btn-hs: var(--sd-colour-warning-hs);
260
+ }
261
+
262
+ &.btn--alert {
263
+ --sd-btn-hs: var(--sd-colour-alert-hs);
264
+ }
265
+
266
+ &.btn--highlight {
267
+ --sd-btn-hs: var(--sd-colour-highlight-hs);
268
+ }
269
+
270
+ &.btn--sd-green {
271
+ --sd-btn-hs: var(--sd-colour-superdesk-hs);
272
+ }
273
+
274
+ &.btn--secondary {
275
+ --sd-btn-hs: var(--sd-colour-secondary-hs);
276
+ }
277
+ &.btn--primary,
278
+ &.btn--success,
279
+ &.btn--warning,
280
+ &.btn--alert,
281
+ &.btn--highlight,
282
+ &.btn--sd-green,
283
+ &.btn--secondary {
284
+ color: var(--sd-btn-txt);
285
+ .sd-spinner__path {
286
+ stroke: var(--sd-btn-txt);
287
+ }
288
+ }
289
+ }
290
+ &.btn--icon-only {
291
+ [class^="icon-"], [class*=" icon-"] {
292
+ margin: 0;
293
+ }
294
+ &.btn--icon-only-circle {
295
+ border-radius: $border-radius__base--full;
296
+ padding: 0;
297
+ width: $height__button--default;
298
+ &.btn--small {
299
+ width: $height__button--small;
300
+ }
301
+ &.btn--large {
302
+ width: $height__button--large;
303
+ }
304
+ }
305
+ }
306
+ &.btn--disabled, &[disabled] {
307
+ opacity: $button-opacity-disabled;
308
+ cursor: not-allowed;
309
+ pointer-events: none;
310
+ box-shadow: none !important;
311
+ &:hover, &:active {
312
+ cursor: not-allowed;
313
+ }
298
314
  }
299
- }
300
315
  }
301
316
  ////////////////////////////// END NEW BUTTONS /////////////////////////////
302
317
 
303
318
  // Plain Icon buttons
304
319
  @mixin icn-btn-style () {
305
- display: inline-flex;
306
- align-items: center;
307
- justify-content: center;
308
- font-size: 1.6rem;
309
- transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
310
- height: $height__button--default;
311
- width: $height__button--default;
312
- border-radius: $border-radius__base--full;
313
- background-color: transparent;
314
- opacity: 0.75;
315
- background-color: rgba(55,55,55,0);
316
- color: inherit;
317
- text-decoration: none;
318
- cursor: pointer;
319
- [class^="icon-"], [class*=" icon-"] {
320
+ display: inline-flex;
321
+ align-items: center;
322
+ justify-content: center;
323
+ font-size: 1.6rem;
324
+ transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
325
+ height: $height__button--default;
326
+ width: $height__button--default;
327
+ border-radius: $border-radius__base--full;
328
+ background-color: transparent;
329
+ opacity: 0.75;
330
+ background-color: rgba(55,55,55,0);
320
331
  color: inherit;
321
- vertical-align: baseline !important;
322
- }
323
- &:hover {
324
- opacity: 1;
325
332
  text-decoration: none;
326
- background-color: rgba(155,155,155,0.20);
327
- }
328
- &:focus-visible {
329
- opacity: 1;
330
- background-color: rgba(155,155,155,0.20);
331
- box-shadow: $icn-button-focus-box-shadow;
333
+ cursor: pointer;
334
+ flex-shrink: 0;
332
335
  [class^="icon-"], [class*=" icon-"] {
333
- opacity: 1;
336
+ color: inherit;
337
+ vertical-align: baseline !important;
334
338
  }
335
- }
336
- &:active {
337
- opacity: 1;
338
- background-color: rgba(155,155,155,0.30);
339
- [class^="icon-"], [class*=" icon-"] {
340
- color: $sd-colour-interactive;
341
- opacity: 1;
339
+ &:hover {
340
+ opacity: 1;
341
+ text-decoration: none;
342
+ background-color: hsla(214, 13%, 55%, 0.2);
343
+ }
344
+ &:focus-visible {
345
+ opacity: 1;
346
+ background-color: hsla(214, 13%, 55%, 0.2);
347
+ box-shadow: $icn-button-focus-box-shadow;
348
+ outline: none;
349
+ [class^="icon-"], [class*=" icon-"] {
350
+ opacity: 1;
351
+ }
352
+ }
353
+ &:active {
354
+ opacity: 1;
355
+ background-color: hsla(214, 13%, 55%, 0.3);
356
+ [class^="icon-"], [class*=" icon-"] {
357
+ color: $sd-colour-interactive;
358
+ opacity: 1;
359
+ }
360
+ }
361
+ &--disabled {
362
+ opacity: $icn-button-opacity-disabled;
363
+ &:hover, &:active, &:focus-visible {
364
+ background-color: transparent !important;
365
+ cursor: not-allowed;
366
+ opacity: $icn-button-opacity-disabled;
367
+ [class^="icon-"], [class*=" icon-"] {
368
+ opacity: 1;
369
+ color: inherit !important;
370
+ }
371
+ }
342
372
  }
343
- }
344
- &--disabled {
345
- opacity: $button-opacity-disabled;
346
- }
347
373
  }
348
374
 
349
375
  .icn-btn {
350
- @include icn-btn-style;
351
- &--small {
352
- height: $height__button--small;
353
- width: $height__button--small;
354
- }
376
+ @include icn-btn-style;
377
+ &--small {
378
+ height: $height__button--small;
379
+ width: $height__button--small;
380
+ }
381
+ &--x-large {
382
+ height: $height__button--x-large;
383
+ width: $height__button--x-large;
384
+ [class^="icon-"], [class*=" icon-"] {
385
+ color: inherit;
386
+ vertical-align: baseline !important;
387
+ font-size: 2.4rem;
388
+ height: 2.4rem;
389
+ width: 2.4rem;
390
+ line-height: 2.4rem;
391
+ }
392
+
393
+ }
394
+ &--outline {
395
+ border: 1px solid currentColor;
396
+ &:active:not(.icn-btn--disabled) {
397
+ border-color: var(--sd-colour-interactive);
398
+ }
399
+ }
400
+ &--outlineWhite {
401
+ color: hsla(214, 13%, 95%, 0.8);
402
+ border: 1px solid currentColor;
403
+ &:hover:not(.icn-btn--disabled) {
404
+ color: hsla(214, 13%, 95%, 1);
405
+ border-color: hsla(214, 13%, 95%, 1);
406
+ background-color: hsla(0, 0%, 0%, 0.4);
407
+ }
408
+ &:active:not(.icn-btn--disabled) {
409
+ border-color: var(--sd-colour-interactive);
410
+ background-color: hsla(0, 0%, 0%, 0.6);
411
+ }
412
+ }
413
+ &.icn-btn--x-large.icn-btn--outline,
414
+ &.icn-btn--x-large.icn-btn--outlineWhite {
415
+ border-width: 2px;
416
+ }
355
417
  }
356
418
  .p-dialog-header-close {
357
- @include icn-btn-style;
358
- height: $height__button--small;
359
- width: $height__button--small;
360
- &:hover {
361
- opacity: 1;
362
- text-decoration: none;
363
- background-color: rgba(155,155,155,0.20) !important;
364
- }
365
- &:active {
366
- opacity: 1;
367
- background-color: rgba(155,155,155,0.30);
368
- }
369
-
419
+ @include icn-btn-style;
420
+ height: $height__button--small;
421
+ width: $height__button--small;
422
+ &:hover {
423
+ opacity: 1;
424
+ text-decoration: none;
425
+ background-color: hsla(0, 0%, 61%, 0.2) !important;
426
+ }
427
+ &:active {
428
+ opacity: 1;
429
+ background-color: hsla(0, 0%, 61%, 0.3);
430
+ }
370
431
  }
371
432
 
372
433
  // Button navigation
@@ -410,12 +471,7 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
410
471
  .btn-icon-group {
411
472
  display: flex;
412
473
  align-items: center;
413
-
414
- .btn + .btn {
415
- gap: 6px;
416
- //margin-left: 6px;
417
- }
418
-
474
+ gap: 6px;
419
475
  [class^="icon-"], [class*=" icon-"] {
420
476
  opacity: 0.6;
421
477
  }
@@ -429,11 +485,12 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
429
485
  display: flex;
430
486
  flex-direction: row;
431
487
  align-items: center;
488
+ gap: $sd-base-increment;
432
489
 
433
490
  .btn {
434
491
  margin: 0;
435
492
  }
436
- &--left {
493
+ &--left, &--start {
437
494
  margin-inline-end: auto;
438
495
  .sd-navbtn {
439
496
  border-inline-width: 0 1px;
@@ -453,7 +510,7 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
453
510
  border-inline-width: 0 1px;
454
511
  }
455
512
  }
456
- &--right {
513
+ &--right, &--end {
457
514
  margin-inline-start: auto;
458
515
  }
459
516
  &--center {
@@ -475,12 +532,19 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
475
532
  &--comfort {
476
533
  gap: $sd-base-increment;
477
534
  }
535
+ &--loose {
536
+ gap: $sd-base-increment * 2;
537
+ }
478
538
  &--compact {
479
539
  gap: $sd-base-increment * 0.5;
480
540
  }
481
541
  &--no-space {
482
542
  gap: unset;
483
543
  }
544
+ &--padded {
545
+ padding-inline-start: $sd-base-increment * 2;
546
+ padding-inline-end: $sd-base-increment * 2;
547
+ }
484
548
  }
485
549
 
486
550
  .button-group__divider {
@@ -584,12 +648,47 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
584
648
  }
585
649
 
586
650
  .visuallyhidden {
587
- border: 0;
588
- clip: rect(0 0 0 0);
589
- height: 1px;
590
- margin: -1px;
591
- overflow: hidden;
592
- padding: 0;
593
- position: absolute;
594
- width: 1px;
595
- }
651
+ border: 0;
652
+ clip: rect(0 0 0 0);
653
+ height: 1px;
654
+ margin: -1px;
655
+ overflow: hidden;
656
+ padding: 0;
657
+ position: absolute;
658
+ width: 1px;
659
+ }
660
+
661
+ .btn__state--loading {
662
+ position: absolute;
663
+ top: 0;
664
+ bottom: 0;
665
+ left: 0;
666
+ right: 0;
667
+ display: flex;
668
+ align-items: center;
669
+ justify-content: center;
670
+ z-index: 2;
671
+ }
672
+ .btn--loading {
673
+ color: transparent;
674
+ pointer-events: none;
675
+ }
676
+ .btn {
677
+ &[data-loading="true"] {
678
+ pointer-events: none;
679
+ .sd-spinner {
680
+ margin-inline-start: -0.3rem;
681
+ }
682
+ &.btn--icon-only {
683
+ .sd-spinner {
684
+ margin-inline-start: 0;
685
+ }
686
+ }
687
+ }
688
+ }
689
+
690
+ .button-group {
691
+ .tag-label {
692
+ margin: 0 !important;
693
+ }
694
+ }