superdesk-ui-framework 4.0.46 → 4.0.48

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 (563) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/form-elements/_forms-general.scss +0 -4
  9. package/app-typescript/components/Alert.tsx +12 -16
  10. package/app-typescript/components/Autocomplete.tsx +53 -42
  11. package/app-typescript/components/Badge.tsx +1 -1
  12. package/app-typescript/components/Button.tsx +5 -11
  13. package/app-typescript/components/ButtonGroup.tsx +15 -10
  14. package/app-typescript/components/Carousel.tsx +25 -26
  15. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  16. package/app-typescript/components/Checkbox.tsx +16 -10
  17. package/app-typescript/components/CheckboxButton.tsx +22 -13
  18. package/app-typescript/components/ContentDivider.tsx +6 -7
  19. package/app-typescript/components/CreateButton.tsx +8 -6
  20. package/app-typescript/components/DatePicker.tsx +59 -55
  21. package/app-typescript/components/DateTimePicker.tsx +175 -117
  22. package/app-typescript/components/Divider.tsx +2 -4
  23. package/app-typescript/components/DonutChart.tsx +11 -6
  24. package/app-typescript/components/DragHandle.tsx +10 -6
  25. package/app-typescript/components/DragHandleDots.tsx +1 -3
  26. package/app-typescript/components/DropZone.tsx +27 -25
  27. package/app-typescript/components/Dropdown.tsx +61 -102
  28. package/app-typescript/components/DropdownFirst.tsx +57 -69
  29. package/app-typescript/components/DurationInput.tsx +64 -54
  30. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  31. package/app-typescript/components/EmptyState.tsx +10 -14
  32. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  33. package/app-typescript/components/Form/FormItem.tsx +1 -5
  34. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  35. package/app-typescript/components/Form/FormRow.tsx +12 -19
  36. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  37. package/app-typescript/components/Form/FormText.tsx +1 -5
  38. package/app-typescript/components/Form/InputBase.tsx +12 -11
  39. package/app-typescript/components/Form/InputNew.tsx +11 -12
  40. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  41. package/app-typescript/components/Form/index.tsx +9 -9
  42. package/app-typescript/components/FormLabel.tsx +1 -5
  43. package/app-typescript/components/GridItem.tsx +38 -69
  44. package/app-typescript/components/GridList.tsx +2 -6
  45. package/app-typescript/components/HeadingText.tsx +4 -5
  46. package/app-typescript/components/IconButton.tsx +4 -10
  47. package/app-typescript/components/IconLabel.tsx +5 -5
  48. package/app-typescript/components/IconPicker.tsx +128 -126
  49. package/app-typescript/components/IllustrationButton.tsx +2 -8
  50. package/app-typescript/components/Input.tsx +2 -2
  51. package/app-typescript/components/Label.tsx +11 -7
  52. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  53. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  54. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  55. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  57. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  58. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  63. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  66. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  67. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  68. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  69. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  70. package/app-typescript/components/Layouts/Container.tsx +13 -8
  71. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  72. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  73. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  74. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  75. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  76. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  77. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  78. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  79. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  80. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  81. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  82. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  83. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  84. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  85. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  86. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  87. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  88. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  89. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  90. package/app-typescript/components/Layouts/index.tsx +39 -39
  91. package/app-typescript/components/LeftMenu.tsx +51 -53
  92. package/app-typescript/components/ListItemLoader.tsx +1 -1
  93. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  94. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  95. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  96. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  97. package/app-typescript/components/Lists/TableList.tsx +169 -217
  98. package/app-typescript/components/Lists/index.tsx +2 -2
  99. package/app-typescript/components/Loader.tsx +1 -3
  100. package/app-typescript/components/Menu.tsx +2 -4
  101. package/app-typescript/components/Modal.tsx +21 -21
  102. package/app-typescript/components/MultiSelect.tsx +6 -6
  103. package/app-typescript/components/NavButton.tsx +10 -8
  104. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  105. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  106. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  107. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  108. package/app-typescript/components/Navigation/index.tsx +3 -3
  109. package/app-typescript/components/Popover.tsx +19 -21
  110. package/app-typescript/components/PropsList.tsx +2 -4
  111. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  112. package/app-typescript/components/RadioGroup.tsx +9 -8
  113. package/app-typescript/components/ResizablePanels.tsx +2 -3
  114. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  115. package/app-typescript/components/SearchBar.tsx +53 -45
  116. package/app-typescript/components/Select.tsx +6 -8
  117. package/app-typescript/components/SelectGrid.tsx +32 -40
  118. package/app-typescript/components/SelectPreview.tsx +31 -25
  119. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  120. package/app-typescript/components/ShowPopup.tsx +30 -46
  121. package/app-typescript/components/SidebarMenu.tsx +19 -18
  122. package/app-typescript/components/Skeleton.tsx +12 -11
  123. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  124. package/app-typescript/components/Spinner.tsx +2 -6
  125. package/app-typescript/components/StrechBar.tsx +1 -5
  126. package/app-typescript/components/SubNav.tsx +10 -8
  127. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  128. package/app-typescript/components/Switch.tsx +14 -12
  129. package/app-typescript/components/SwitchGroup.tsx +10 -10
  130. package/app-typescript/components/TabCustom.tsx +28 -35
  131. package/app-typescript/components/TabList.tsx +13 -10
  132. package/app-typescript/components/Tag.tsx +21 -24
  133. package/app-typescript/components/TagInput.tsx +4 -11
  134. package/app-typescript/components/Text/Heading.tsx +21 -41
  135. package/app-typescript/components/Text/Text.tsx +16 -12
  136. package/app-typescript/components/Text/Time.tsx +14 -10
  137. package/app-typescript/components/ThemeSelector.tsx +15 -14
  138. package/app-typescript/components/TimePicker.tsx +2 -2
  139. package/app-typescript/components/TimePickerV2.tsx +20 -20
  140. package/app-typescript/components/Toast.tsx +11 -7
  141. package/app-typescript/components/ToastMessage.tsx +3 -14
  142. package/app-typescript/components/ToastText.tsx +30 -32
  143. package/app-typescript/components/ToastWrapper.tsx +76 -74
  144. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  145. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  146. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  147. package/app-typescript/components/Tooltip.tsx +1 -1
  148. package/app-typescript/components/TreeMenu.tsx +72 -81
  149. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  150. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  151. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  152. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  153. package/app-typescript/components/WithPagination.tsx +34 -39
  154. package/app-typescript/components/WithPopover.tsx +0 -1
  155. package/app-typescript/components/WithPortal.tsx +4 -7
  156. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  157. package/app-typescript/components/_Positioner.tsx +26 -26
  158. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  159. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  160. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  161. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  162. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  163. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  164. package/app-typescript/components/avatar/avatar.tsx +5 -8
  165. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  166. package/app-typescript/helpers.tsx +2 -2
  167. package/app-typescript/index.ts +111 -100
  168. package/declarations.d.ts +1 -1
  169. package/dist/components/Alerts.tsx +171 -78
  170. package/dist/components/Autocomplete.tsx +187 -78
  171. package/dist/components/Avatar.tsx +52 -112
  172. package/dist/components/Badges.tsx +111 -67
  173. package/dist/components/BigIconFont.tsx +29 -17
  174. package/dist/components/BoxedList.tsx +244 -114
  175. package/dist/components/ButtonGroups.tsx +213 -147
  176. package/dist/components/Buttons.tsx +409 -137
  177. package/dist/components/Card.tsx +6 -7
  178. package/dist/components/Carousel.tsx +126 -39
  179. package/dist/components/Checkboxs.tsx +446 -105
  180. package/dist/components/Container.tsx +95 -48
  181. package/dist/components/ContentDivider.tsx +110 -63
  182. package/dist/components/ContentList.tsx +577 -253
  183. package/dist/components/CreateButton.tsx +71 -21
  184. package/dist/components/DatePicker.tsx +102 -26
  185. package/dist/components/DateTimePicker.tsx +46 -10
  186. package/dist/components/DragHandleDocs.tsx +56 -26
  187. package/dist/components/DropZone.tsx +67 -29
  188. package/dist/components/Dropdowns.tsx +220 -131
  189. package/dist/components/DurationInput.tsx +92 -32
  190. package/dist/components/EmptyStates.tsx +61 -26
  191. package/dist/components/GridItem.tsx +190 -91
  192. package/dist/components/GridList.tsx +37 -17
  193. package/dist/components/Heading.tsx +81 -35
  194. package/dist/components/IconButtons.tsx +125 -32
  195. package/dist/components/IconFont.tsx +24 -12
  196. package/dist/components/IconLabels.tsx +146 -39
  197. package/dist/components/IconPicker.tsx +30 -13
  198. package/dist/components/IllustrationButton.tsx +40 -20
  199. package/dist/components/Index.tsx +128 -114
  200. package/dist/components/Inputs.tsx +153 -51
  201. package/dist/components/Labels.tsx +191 -117
  202. package/dist/components/LeftNavigations.tsx +327 -100
  203. package/dist/components/ListItems.tsx +8 -9
  204. package/dist/components/Loader.tsx +5 -4
  205. package/dist/components/Menu.tsx +48 -26
  206. package/dist/components/Modal.tsx +298 -104
  207. package/dist/components/MultiSelect.tsx +189 -53
  208. package/dist/components/NavButtons.tsx +86 -30
  209. package/dist/components/Panel.tsx +367 -120
  210. package/dist/components/Popover.tsx +37 -17
  211. package/dist/components/QuickNavigationBar.tsx +222 -86
  212. package/dist/components/RadioGroup.tsx +375 -137
  213. package/dist/components/ResizablePanels.tsx +8 -14
  214. package/dist/components/SelectGrid.tsx +79 -38
  215. package/dist/components/SelectWithTemplate.tsx +23 -14
  216. package/dist/components/Selects.tsx +94 -29
  217. package/dist/components/SimpleList.tsx +91 -41
  218. package/dist/components/SubNav.tsx +57 -37
  219. package/dist/components/Switch.tsx +168 -42
  220. package/dist/components/TableList.tsx +220 -66
  221. package/dist/components/Tabs.tsx +149 -64
  222. package/dist/components/TagInputDocs.tsx +73 -17
  223. package/dist/components/Tags.tsx +104 -73
  224. package/dist/components/Text.tsx +108 -58
  225. package/dist/components/TimePicker.tsx +74 -20
  226. package/dist/components/Toasts.tsx +162 -80
  227. package/dist/components/Togglebox.tsx +164 -62
  228. package/dist/components/Tooltips.tsx +27 -15
  229. package/dist/components/TreeMenu.tsx +95 -59
  230. package/dist/components/TreeSelect.tsx +297 -162
  231. package/dist/components/WithPaginationDocs.tsx +15 -16
  232. package/dist/components/WithSizeObserver.tsx +9 -9
  233. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  234. package/dist/components/tree-select/example-1.tsx +8 -12
  235. package/dist/components/tree-select/example-2.tsx +2 -5
  236. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  237. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  238. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  239. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  240. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  241. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  242. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  243. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  244. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  245. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  246. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  247. package/dist/components/utilities/TextUtilities.tsx +109 -60
  248. package/dist/design-patterns/Index.tsx +8 -11
  249. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  250. package/dist/examples.bundle.css +1257 -1155
  251. package/dist/examples.bundle.js +6246 -5620
  252. package/dist/playgrounds/dummy-data/items.ts +9 -8
  253. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  254. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  255. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  256. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  257. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  258. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  259. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  260. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  261. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  262. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  263. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  264. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  265. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  266. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  267. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  268. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  269. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  270. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  271. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  272. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  273. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  274. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  275. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  276. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  277. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  278. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  279. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  281. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  282. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  284. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  285. package/dist/superdesk-ui.bundle.css +0 -3
  286. package/dist/superdesk-ui.bundle.js +1791 -1865
  287. package/dist/vendor.bundle.js +2 -2
  288. package/examples/css/docs-page.css +1135 -1116
  289. package/examples/css/reset.css +124 -43
  290. package/examples/css/vendor.css +125 -125
  291. package/examples/index.js +138 -139
  292. package/examples/js/doc.js +41 -40
  293. package/examples/js/react.js +82 -48
  294. package/examples/pages/components/Alerts.tsx +171 -78
  295. package/examples/pages/components/Autocomplete.tsx +187 -78
  296. package/examples/pages/components/Avatar.tsx +52 -112
  297. package/examples/pages/components/Badges.tsx +111 -67
  298. package/examples/pages/components/BigIconFont.tsx +29 -17
  299. package/examples/pages/components/BoxedList.tsx +244 -114
  300. package/examples/pages/components/ButtonGroups.tsx +213 -147
  301. package/examples/pages/components/Buttons.tsx +409 -137
  302. package/examples/pages/components/Card.tsx +6 -7
  303. package/examples/pages/components/Carousel.tsx +126 -39
  304. package/examples/pages/components/Checkboxs.tsx +446 -105
  305. package/examples/pages/components/Container.tsx +95 -48
  306. package/examples/pages/components/ContentDivider.tsx +110 -63
  307. package/examples/pages/components/ContentList.tsx +577 -253
  308. package/examples/pages/components/CreateButton.tsx +71 -21
  309. package/examples/pages/components/DatePicker.tsx +102 -26
  310. package/examples/pages/components/DateTimePicker.tsx +46 -10
  311. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  312. package/examples/pages/components/DropZone.tsx +67 -29
  313. package/examples/pages/components/Dropdowns.tsx +220 -131
  314. package/examples/pages/components/DurationInput.tsx +92 -32
  315. package/examples/pages/components/EmptyStates.tsx +61 -26
  316. package/examples/pages/components/GridItem.tsx +190 -91
  317. package/examples/pages/components/GridList.tsx +37 -17
  318. package/examples/pages/components/Heading.tsx +81 -35
  319. package/examples/pages/components/IconButtons.tsx +125 -32
  320. package/examples/pages/components/IconFont.tsx +24 -12
  321. package/examples/pages/components/IconLabels.tsx +146 -39
  322. package/examples/pages/components/IconPicker.tsx +30 -13
  323. package/examples/pages/components/IllustrationButton.tsx +40 -20
  324. package/examples/pages/components/Index.tsx +128 -114
  325. package/examples/pages/components/Inputs.tsx +153 -51
  326. package/examples/pages/components/Labels.tsx +191 -117
  327. package/examples/pages/components/LeftNavigations.tsx +327 -100
  328. package/examples/pages/components/ListItems.tsx +8 -9
  329. package/examples/pages/components/Loader.tsx +5 -4
  330. package/examples/pages/components/Menu.tsx +48 -26
  331. package/examples/pages/components/Modal.tsx +298 -104
  332. package/examples/pages/components/MultiSelect.tsx +189 -53
  333. package/examples/pages/components/NavButtons.tsx +86 -30
  334. package/examples/pages/components/Panel.tsx +367 -120
  335. package/examples/pages/components/Popover.tsx +37 -17
  336. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  337. package/examples/pages/components/RadioGroup.tsx +375 -137
  338. package/examples/pages/components/ResizablePanels.tsx +8 -14
  339. package/examples/pages/components/SelectGrid.tsx +79 -38
  340. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  341. package/examples/pages/components/Selects.tsx +94 -29
  342. package/examples/pages/components/SimpleList.tsx +91 -41
  343. package/examples/pages/components/SubNav.tsx +57 -37
  344. package/examples/pages/components/Switch.tsx +168 -42
  345. package/examples/pages/components/TableList.tsx +220 -66
  346. package/examples/pages/components/Tabs.tsx +149 -64
  347. package/examples/pages/components/TagInputDocs.tsx +73 -17
  348. package/examples/pages/components/Tags.tsx +104 -73
  349. package/examples/pages/components/Text.tsx +108 -58
  350. package/examples/pages/components/TimePicker.tsx +74 -20
  351. package/examples/pages/components/Toasts.tsx +162 -80
  352. package/examples/pages/components/Togglebox.tsx +164 -62
  353. package/examples/pages/components/Tooltips.tsx +27 -15
  354. package/examples/pages/components/TreeMenu.tsx +95 -59
  355. package/examples/pages/components/TreeSelect.tsx +297 -162
  356. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  357. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  358. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  359. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  360. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  361. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  362. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  363. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  364. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  365. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  366. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  367. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  368. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  370. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  371. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  372. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  373. package/examples/pages/design-patterns/Index.tsx +8 -11
  374. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  375. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  376. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  377. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  378. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  379. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  380. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  381. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  382. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  383. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  384. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  385. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  386. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  387. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  388. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  389. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  390. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  391. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  392. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  393. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  394. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  395. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  396. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  397. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  398. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  400. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  401. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  402. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  403. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  404. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  405. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  407. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  408. package/globals.d.ts +1 -1
  409. package/mocha-setup.ts +3 -3
  410. package/package.json +119 -117
  411. package/react/components/Alert.js +6 -9
  412. package/react/components/Autocomplete.js +15 -23
  413. package/react/components/Badge.js +1 -1
  414. package/react/components/Button.js +4 -6
  415. package/react/components/ButtonGroup.js +1 -1
  416. package/react/components/Carousel.js +3 -3
  417. package/react/components/CheckButtonGroup.js +3 -6
  418. package/react/components/CheckboxButton.js +2 -4
  419. package/react/components/ContentDivider.js +1 -1
  420. package/react/components/DatePicker.js +29 -26
  421. package/react/components/DateTimePicker.d.ts +26 -4
  422. package/react/components/DateTimePicker.js +82 -27
  423. package/react/components/Divider.js +1 -1
  424. package/react/components/DonutChart.js +1 -1
  425. package/react/components/DragHandle.js +1 -1
  426. package/react/components/DragHandleDots.js +1 -1
  427. package/react/components/DropZone.js +6 -8
  428. package/react/components/Dropdown.d.ts +1 -1
  429. package/react/components/Dropdown.js +34 -38
  430. package/react/components/DropdownFirst.d.ts +11 -11
  431. package/react/components/DropdownFirst.js +20 -24
  432. package/react/components/DurationInput.js +37 -34
  433. package/react/components/EmptyState.js +5 -5
  434. package/react/components/Form/FormGroup.js +1 -1
  435. package/react/components/Form/FormItem.js +1 -1
  436. package/react/components/Form/FormRow.js +1 -1
  437. package/react/components/Form/FormRowNew.js +3 -3
  438. package/react/components/Form/FormText.js +1 -1
  439. package/react/components/Form/InputNew.js +3 -3
  440. package/react/components/Form/InputWrapper.js +7 -10
  441. package/react/components/GridItem.d.ts +1 -1
  442. package/react/components/GridItem.js +16 -16
  443. package/react/components/GridList.js +1 -1
  444. package/react/components/HeadingText.js +4 -5
  445. package/react/components/IconLabel.js +3 -5
  446. package/react/components/IconPicker.d.ts +1 -1
  447. package/react/components/IconPicker.js +111 -104
  448. package/react/components/IllustrationButton.js +1 -1
  449. package/react/components/Input.js +1 -1
  450. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  451. package/react/components/Layouts/AuthoringContainer.js +1 -1
  452. package/react/components/Layouts/AuthoringFrame.js +4 -4
  453. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  454. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  455. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  456. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  457. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  458. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  461. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  462. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  463. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  464. package/react/components/Layouts/BottomBarAction.js +2 -2
  465. package/react/components/Layouts/ContentSplitter.js +1 -1
  466. package/react/components/Layouts/CoreLayout.js +2 -2
  467. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  468. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  469. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  470. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  471. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  472. package/react/components/Layouts/HamburgerButton.js +1 -1
  473. package/react/components/Layouts/HeaderPanel.js +1 -1
  474. package/react/components/Layouts/Layout.d.ts +1 -1
  475. package/react/components/Layouts/Layout.js +9 -9
  476. package/react/components/Layouts/LayoutContainer.js +1 -1
  477. package/react/components/Layouts/LeftPanel.js +1 -1
  478. package/react/components/Layouts/MainMenu.js +8 -10
  479. package/react/components/Layouts/MainPanel.js +1 -1
  480. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  481. package/react/components/Layouts/NotificationPanel.js +7 -7
  482. package/react/components/Layouts/OverlayPanel.js +3 -3
  483. package/react/components/Layouts/PageLayout.js +2 -2
  484. package/react/components/Layouts/Panel.d.ts +1 -1
  485. package/react/components/Layouts/Panel.js +12 -18
  486. package/react/components/LeftMenu.d.ts +3 -3
  487. package/react/components/LeftMenu.js +11 -13
  488. package/react/components/Lists/BoxedList.js +6 -6
  489. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  490. package/react/components/Lists/ContentList.js +24 -26
  491. package/react/components/Lists/TableList.d.ts +1 -1
  492. package/react/components/Lists/TableList.js +59 -79
  493. package/react/components/Loader.js +1 -1
  494. package/react/components/Menu.js +1 -1
  495. package/react/components/Modal.d.ts +1 -1
  496. package/react/components/MultiSelect.d.ts +1 -1
  497. package/react/components/MultiSelect.js +2 -2
  498. package/react/components/NavButton.js +2 -4
  499. package/react/components/Navigation/BottomNav.js +9 -8
  500. package/react/components/Navigation/QuickNavBar.js +17 -20
  501. package/react/components/Navigation/SideBarMenu.js +11 -9
  502. package/react/components/Navigation/SideBarTabs.js +9 -8
  503. package/react/components/Popover.js +1 -1
  504. package/react/components/RadioButtonGroup.js +15 -23
  505. package/react/components/ResizablePanels.js +1 -3
  506. package/react/components/ResizeObserverComponent.js +1 -3
  507. package/react/components/SearchBar.js +14 -16
  508. package/react/components/Select.js +3 -3
  509. package/react/components/SelectGrid.js +15 -20
  510. package/react/components/SelectPreview.js +13 -13
  511. package/react/components/SelectWithTemplate.js +3 -5
  512. package/react/components/ShowPopup.js +7 -10
  513. package/react/components/Skeleton.js +1 -1
  514. package/react/components/SlidingToolbar.js +1 -1
  515. package/react/components/Spinner.js +1 -1
  516. package/react/components/StrechBar.js +1 -1
  517. package/react/components/SubNav.js +1 -1
  518. package/react/components/Switch.js +4 -6
  519. package/react/components/SwitchGroup.js +1 -1
  520. package/react/components/TabCustom.js +6 -4
  521. package/react/components/TabList.js +4 -8
  522. package/react/components/Tag.js +13 -17
  523. package/react/components/TagInput.js +1 -1
  524. package/react/components/Text/Heading.js +6 -6
  525. package/react/components/ThemeSelector.js +1 -1
  526. package/react/components/TimePickerV2.js +17 -17
  527. package/react/components/Toast.js +3 -3
  528. package/react/components/ToastMessage.d.ts +1 -1
  529. package/react/components/ToastMessage.js +1 -1
  530. package/react/components/ToastText.js +5 -8
  531. package/react/components/ToastWrapper.js +3 -5
  532. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  533. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  534. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  535. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  536. package/react/components/ToggleBox/index.js +3 -3
  537. package/react/components/TreeMenu.d.ts +1 -1
  538. package/react/components/TreeMenu.js +38 -44
  539. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  540. package/react/components/TreeSelect/TreeSelect.js +105 -127
  541. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  542. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  543. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  544. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  545. package/react/components/WithPagination.js +18 -21
  546. package/react/components/WithPortal.d.ts +1 -1
  547. package/react/components/WithPortal.js +2 -1
  548. package/react/components/WithSizeObserver.js +1 -3
  549. package/react/components/_Positioner.js +11 -11
  550. package/react/components/avatar/avatar-action-add.js +1 -1
  551. package/react/components/avatar/avatar-group.js +11 -14
  552. package/react/components/avatar/avatar-image.js +6 -4
  553. package/react/components/avatar/avatar-placeholder.js +1 -1
  554. package/react/components/avatar/avatar-wrapper.js +2 -4
  555. package/react/components/avatar/avatar.js +4 -3
  556. package/react/helpers.js +2 -2
  557. package/react/index.d.ts +1 -1
  558. package/tasks/webpack.dev.js +1 -1
  559. package/tasks/webpack.js +5 -5
  560. package/tasks/webpack.prod.js +1 -5
  561. package/tsconfig.json +2 -5
  562. package/tslint.json +6 -12
  563. package/webpack.config.js +2 -5
@@ -1,10 +1,51 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton, } from '../../../../app-typescript/index';
4
- import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
3
+ import {
4
+ Checkbox,
5
+ RadioGroup,
6
+ CheckboxButton,
7
+ RadioButtonGroup,
8
+ Button,
9
+ Dropdown,
10
+ Input,
11
+ Label,
12
+ Icon,
13
+ IconButton,
14
+ Badge,
15
+ ThemeSelector,
16
+ Container,
17
+ IconLabel,
18
+ Tooltip,
19
+ Spinner,
20
+ Divider,
21
+ InputWrapper,
22
+ InputNew,
23
+ InputBase,
24
+ Text,
25
+ FormRowNew,
26
+ ButtonGroup,
27
+ Heading,
28
+ SearchBar,
29
+ Modal,
30
+ BoxedList,
31
+ BoxedListItem,
32
+ TimePicker,
33
+ TreeSelect,
34
+ DatePicker,
35
+ ContentDivider,
36
+ Select,
37
+ Option,
38
+ AvatarGroup,
39
+ Avatar,
40
+ SvgIconIllustration,
41
+ IllustrationButton,
42
+ SubNav,
43
+ NavButton,
44
+ } from '../../../../app-typescript/index';
45
+ import {IAvatarInGroup} from '../../../../app-typescript/components/avatar/avatar-group';
5
46
  import * as Form from '../../../../app-typescript/components/Form';
6
- import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
7
- import { CalendarWeekDayItem } from '../../../../app-typescript/components//Lists/CalendarWeekDayItem';
47
+ import {FormLabel} from '../../../../app-typescript/components/Form/FormLabel';
48
+ import {CalendarWeekDayItem} from '../../../../app-typescript/components//Lists/CalendarWeekDayItem';
8
49
 
9
50
  interface IProps {
10
51
  children?: React.ReactNode;
@@ -52,7 +93,7 @@ let options2 = [
52
93
  {
53
94
  value: {name: 'Category3'},
54
95
  },
55
- ]
96
+ ];
56
97
  let options3 = [
57
98
  {
58
99
  value: {name: 'Norvegian'},
@@ -63,7 +104,7 @@ let options3 = [
63
104
  {
64
105
  value: {name: 'English'},
65
106
  },
66
- ]
107
+ ];
67
108
  let options4 = [
68
109
  {
69
110
  value: {name: 'Turku, Finland'},
@@ -74,8 +115,7 @@ let options4 = [
74
115
  {
75
116
  value: {name: 'Rovaniemi, Finland'},
76
117
  },
77
- ]
78
-
118
+ ];
79
119
 
80
120
  export class TestGround extends React.Component<IProps, IState> {
81
121
  constructor(props: IProps) {
@@ -110,7 +150,7 @@ export class TestGround extends React.Component<IProps, IState> {
110
150
  openCollapsibleThree: false,
111
151
  openCollapsibleFour: false,
112
152
  openCollapsibleFive: false,
113
- }
153
+ };
114
154
  }
115
155
 
116
156
  changeStatus(item: any, status: string) {
@@ -122,14 +162,14 @@ export class TestGround extends React.Component<IProps, IState> {
122
162
  }
123
163
 
124
164
  toggleTheme = () => {
125
- this.setState( {
165
+ this.setState({
126
166
  thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
127
167
  });
128
168
  };
129
169
 
130
170
  toggleExpand = () => {
131
- this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
132
- }
171
+ this.setState((prevState) => ({isExpanded: !prevState.isExpanded}));
172
+ };
133
173
 
134
174
  render() {
135
175
  const avatars: Array<IAvatarInGroup> = [
@@ -137,223 +177,228 @@ export class TestGround extends React.Component<IProps, IState> {
137
177
  imageUrl: null,
138
178
  initials: null,
139
179
  displayName: 'Unassigned',
140
- icon:{name: 'video', color: 'var(--sd-colour-state--default)'},
141
- statusDot:{color: 'var(--sd-colour-coverage-state--not-covering)'}
180
+ icon: {name: 'video', color: 'var(--sd-colour-state--default)'},
181
+ statusDot: {color: 'var(--sd-colour-coverage-state--not-covering)'},
142
182
  },
143
183
  {
144
184
  imageUrl: null,
145
185
  initials: null,
146
186
  displayName: 'Unassigned',
147
- icon:{name: 'file', color: 'var(--sd-colour-state--unassigned)'},
148
- statusDot:{color: 'var(--sd-colour-coverage-state--on-merit)'}
187
+ icon: {name: 'file', color: 'var(--sd-colour-state--unassigned)'},
188
+ statusDot: {color: 'var(--sd-colour-coverage-state--on-merit)'},
149
189
  },
150
190
  {
151
191
  imageUrl: null,
152
- initials: "VS",
192
+ initials: 'VS',
153
193
  displayName: 'Vladimir Stefanovic',
154
- icon:{name: 'text', color: 'var(--sd-colour-state--in-progress)'},
194
+ icon: {name: 'text', color: 'var(--sd-colour-state--in-progress)'},
155
195
  },
156
196
  {
157
197
  imageUrl: null,
158
- initials: "JL",
198
+ initials: 'JL',
159
199
  displayName: 'Jeffrey Lebowski',
160
- icon:{name: 'photo', color: 'var(--sd-colour-state--in-workflow)'}
200
+ icon: {name: 'photo', color: 'var(--sd-colour-state--in-workflow)'},
161
201
  },
162
202
  {
163
203
  imageUrl: null,
164
- initials: "WS",
204
+ initials: 'WS',
165
205
  displayName: 'Walter Sobchak',
166
- icon:{name: 'text', color: 'var(--sd-colour-state--done)'},
206
+ icon: {name: 'text', color: 'var(--sd-colour-state--done)'},
167
207
  },
168
208
  ];
169
209
 
170
- const modalSaveEventFooterOne=(
210
+ const modalSaveEventFooterOne = (
171
211
  <ButtonGroup align="end">
172
- <Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
173
- <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent:false})} />
212
+ <Button text="Cancel" onClick={() => this.setState({modalSaveEvent: false})} />
213
+ <Button type="primary" text="Save" onClick={() => this.setState({modalSaveEvent: false})} />
174
214
  </ButtonGroup>
175
215
  );
176
- const modalSaveEventFooterTwo=(
216
+ const modalSaveEventFooterTwo = (
177
217
  <ButtonGroup align="end">
178
- <Button text='Cancel' onClick={() => this.setState({modalSaveEvent2:false})} />
179
- <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent2:false})} />
218
+ <Button text="Cancel" onClick={() => this.setState({modalSaveEvent2: false})} />
219
+ <Button type="primary" text="Save" onClick={() => this.setState({modalSaveEvent2: false})} />
180
220
  </ButtonGroup>
181
221
  );
182
- const modalSaveEventFooterThree=(
222
+ const modalSaveEventFooterThree = (
183
223
  <ButtonGroup align="end">
184
- <Button text='Cancel' onClick={() => this.setState({modalSaveEvent3:false})} />
185
- <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent3:false})} />
224
+ <Button text="Cancel" onClick={() => this.setState({modalSaveEvent3: false})} />
225
+ <Button type="primary" text="Save" onClick={() => this.setState({modalSaveEvent3: false})} />
186
226
  </ButtonGroup>
187
227
  );
188
228
  return (
189
- <Components.Layout header='Testing Ground' theme={this.state.thisTheme}>
229
+ <Components.Layout header="Testing Ground" theme={this.state.thisTheme}>
190
230
  <Components.LayoutContainer>
191
231
  <Components.MainPanel>
192
-
193
- <ButtonGroup align='end'>
194
- <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
232
+ <ButtonGroup align="end">
233
+ <IconButton
234
+ icon="adjust"
235
+ ariaValue="Toggle theme"
236
+ onClick={this.toggleTheme}
237
+ toolTipFlow="left"
238
+ />
195
239
  </ButtonGroup>
196
240
 
197
- <div className='calendar-user-week-row mb-2 p-2'>
198
- <div className='calendar-week-day__container'>
241
+ <div className="calendar-user-week-row mb-2 p-2">
242
+ <div className="calendar-week-day__container">
199
243
  <CalendarWeekDayItem coloredBg={true}>
200
- <Avatar
201
- size="medium"
202
- imageUrl={null}
203
- initials="112"
204
- displayName="Ido Borneman"
205
- />
206
- <Text size='medium' className='mt-1 mb-0-5 line-height-sm'>Ido Borneman</Text>
207
- <Text size='small' color='light'>@COR110</Text>
244
+ <Avatar size="medium" imageUrl={null} initials="112" displayName="Ido Borneman" />
245
+ <Text size="medium" className="mt-1 mb-0-5 line-height-sm">
246
+ Ido Borneman
247
+ </Text>
248
+ <Text size="small" color="light">
249
+ @COR110
250
+ </Text>
208
251
  </CalendarWeekDayItem>
209
252
  </div>
210
- <div className='calendar-week-day__container'>
211
- <CalendarWeekDayItem state='success' coloredBg={true} disabled={true}>
212
- <Text size='small'>All day</Text>
213
- <div className='d-flex flex-wrap gap-0-5 mt-1'>
214
- <Label text='Antwerpen' type='success' style='translucent'/>
215
- <Label text='Mechelan' type='success' style='translucent'/>
216
- <Label text='Turnhout' type='success' style='translucent'/>
253
+ <div className="calendar-week-day__container">
254
+ <CalendarWeekDayItem state="success" coloredBg={true} disabled={true}>
255
+ <Text size="small">All day</Text>
256
+ <div className="d-flex flex-wrap gap-0-5 mt-1">
257
+ <Label text="Antwerpen" type="success" style="translucent" />
258
+ <Label text="Mechelan" type="success" style="translucent" />
259
+ <Label text="Turnhout" type="success" style="translucent" />
217
260
  </div>
218
261
  </CalendarWeekDayItem>
219
262
  </div>
220
- <div className='calendar-week-day__container d-flex flex-col gap-0-5'>
221
- <CalendarWeekDayItem state='alert' coloredBg={true}>
222
- <Text size='small'>Not available</Text>
263
+ <div className="calendar-week-day__container d-flex flex-col gap-0-5">
264
+ <CalendarWeekDayItem state="alert" coloredBg={true}>
265
+ <Text size="small">Not available</Text>
223
266
  </CalendarWeekDayItem>
224
267
  </div>
225
- <div className='calendar-week-day__container'>
226
- <CalendarWeekDayItem state='warning' coloredBg={true} hidden={true}>
227
- <Text size='small'>20:00-23:30</Text>
228
- <div className='d-flex flex-wrap gap-0-5 mt-1'>
229
- <Label text='Antwerpen' type='warning' style='translucent'/>
230
- <Label text='Mechelan' type='warning' style='translucent'/>
231
- <Label text='Turnhout' type='warning' style='translucent'/>
268
+ <div className="calendar-week-day__container">
269
+ <CalendarWeekDayItem state="warning" coloredBg={true} hidden={true}>
270
+ <Text size="small">20:00-23:30</Text>
271
+ <div className="d-flex flex-wrap gap-0-5 mt-1">
272
+ <Label text="Antwerpen" type="warning" style="translucent" />
273
+ <Label text="Mechelan" type="warning" style="translucent" />
274
+ <Label text="Turnhout" type="warning" style="translucent" />
232
275
  </div>
233
276
  </CalendarWeekDayItem>
234
- <CalendarWeekDayItem state='warning' coloredBg={true}>
235
- <Text size='small'>20:00-23:30</Text>
236
- <div className='d-flex flex-wrap gap-0-5 mt-1'>
237
- <Label text='Antwerpen' type='warning' style='translucent'/>
238
- <Label text='Mechelan' type='warning' style='translucent'/>
239
- <Label text='Turnhout' type='warning' style='translucent'/>
277
+ <CalendarWeekDayItem state="warning" coloredBg={true}>
278
+ <Text size="small">20:00-23:30</Text>
279
+ <div className="d-flex flex-wrap gap-0-5 mt-1">
280
+ <Label text="Antwerpen" type="warning" style="translucent" />
281
+ <Label text="Mechelan" type="warning" style="translucent" />
282
+ <Label text="Turnhout" type="warning" style="translucent" />
240
283
  </div>
241
284
  </CalendarWeekDayItem>
242
285
  </div>
243
- <div className='calendar-week-day__container'>
244
- <CalendarWeekDayItem state='success' coloredBg={true}>
245
- <Text size='small'>All day</Text>
246
- <div className='d-flex flex-wrap gap-0-5 mt-1'>
247
- <Label text='Antwerpen' type='success' style='translucent'/>
248
- <Label text='Mechelan' type='success' style='translucent'/>
249
- <Label text='Turnhout' type='success' style='translucent'/>
286
+ <div className="calendar-week-day__container">
287
+ <CalendarWeekDayItem state="success" coloredBg={true}>
288
+ <Text size="small">All day</Text>
289
+ <div className="d-flex flex-wrap gap-0-5 mt-1">
290
+ <Label text="Antwerpen" type="success" style="translucent" />
291
+ <Label text="Mechelan" type="success" style="translucent" />
292
+ <Label text="Turnhout" type="success" style="translucent" />
250
293
  </div>
251
294
  </CalendarWeekDayItem>
252
295
  </div>
253
- <div className='calendar-week-day__container d-flex flex-col gap-0-5'>
254
- <CalendarWeekDayItem state='success' coloredBg={true}>
255
- <Text size='small'>All day</Text>
256
- <div className='d-flex flex-wrap gap-0-5 mt-1'>
257
- <Label text='Antwerpen' type='success' style='translucent'/>
258
- <Label text='Mechelan' type='success' style='translucent'/>
259
- <Label text='Turnhout' type='success' style='translucent'/>
296
+ <div className="calendar-week-day__container d-flex flex-col gap-0-5">
297
+ <CalendarWeekDayItem state="success" coloredBg={true}>
298
+ <Text size="small">All day</Text>
299
+ <div className="d-flex flex-wrap gap-0-5 mt-1">
300
+ <Label text="Antwerpen" type="success" style="translucent" />
301
+ <Label text="Mechelan" type="success" style="translucent" />
302
+ <Label text="Turnhout" type="success" style="translucent" />
260
303
  </div>
261
304
  </CalendarWeekDayItem>
262
305
  </div>
263
- <div className='calendar-week-day__container'>
264
- <CalendarWeekDayItem state='alert' coloredBg={true}>
265
- <Text size='small'>Not available</Text>
306
+ <div className="calendar-week-day__container">
307
+ <CalendarWeekDayItem state="alert" coloredBg={true}>
308
+ <Text size="small">Not available</Text>
266
309
  </CalendarWeekDayItem>
267
310
  </div>
268
- <div className='calendar-week-day__container'>
269
- <CalendarWeekDayItem state='alert' coloredBg={true}>
270
- <Text size='small'>Not available</Text>
311
+ <div className="calendar-week-day__container">
312
+ <CalendarWeekDayItem state="alert" coloredBg={true}>
313
+ <Text size="small">Not available</Text>
271
314
  </CalendarWeekDayItem>
272
315
  </div>
273
316
  </div>
274
317
 
275
318
  <BoxedList>
276
- <BoxedListItem type='success' density="compact" coloredBg>
277
- <div className='d-flex items-center gap-1'>
278
- <Avatar
279
- size="small"
280
- imageUrl={null}
281
- initials="JL"
282
- displayName="Jeffrey Lebowski"
283
- />
319
+ <BoxedListItem type="success" density="compact" coloredBg>
320
+ <div className="d-flex items-center gap-1">
321
+ <Avatar size="small" imageUrl={null} initials="JL" displayName="Jeffrey Lebowski" />
284
322
  <div>12</div>
285
323
  </div>
286
324
  </BoxedListItem>
287
- <BoxedListItem type='warning' density="compact" coloredBg>
288
- <div className='d-flex items-center gap-1'>
289
- <Avatar
290
- size="small"
291
- imageUrl={null}
292
- initials="JL"
293
- displayName="Jeffrey Lebowski"
294
- />
325
+ <BoxedListItem type="warning" density="compact" coloredBg>
326
+ <div className="d-flex items-center gap-1">
327
+ <Avatar size="small" imageUrl={null} initials="JL" displayName="Jeffrey Lebowski" />
295
328
  <div>11</div>
296
329
  </div>
297
330
  </BoxedListItem>
298
- <BoxedListItem type='alert' density="compact" coloredBg>
299
- <div className='d-flex items-center gap-1'>
300
- <Avatar
301
- size="small"
302
- imageUrl={null}
303
- initials="JL"
304
- displayName="Jeffrey Lebowski"
305
- />
331
+ <BoxedListItem type="alert" density="compact" coloredBg>
332
+ <div className="d-flex items-center gap-1">
333
+ <Avatar size="small" imageUrl={null} initials="JL" displayName="Jeffrey Lebowski" />
306
334
  <div>11</div>
307
335
  </div>
308
336
  </BoxedListItem>
309
337
  </BoxedList>
310
338
 
311
-
312
-
313
- <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFour ? 'new-collapse-box--open' : ''}`}>
339
+ <div
340
+ style={{maxWidth: '600px'}}
341
+ className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFour ? 'new-collapse-box--open' : ''}`}
342
+ >
314
343
  {/* Header */}
315
- <div className='new-collapse-box__header'>
316
- <div className='new-collapse-box__header-inner'>
344
+ <div className="new-collapse-box__header">
345
+ <div className="new-collapse-box__header-inner">
317
346
  <div role="listitem" className="sd-list-item sd-list-item--no-hover">
318
347
  <div className="sd-list-item__border sd-list-item__border--locked"></div>
319
348
  <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
320
- <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
349
+ <Icon type="primary" name="calendar" scale="1.5x" ariaHidden={true} />
321
350
  </div>
322
351
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border pe-1">
323
352
  <div className="sd-list-item__row">
324
353
  <span className="sd-list-item__slugline">Planning Slug</span>
325
354
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
326
- <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
355
+ <span className="sd-list-item__text-strong">
356
+ Cras justo odio, dapibus ac facilisis in.
357
+ </span>
327
358
  </span>
328
359
  </div>
329
360
  <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
330
- <Label text='draft' style='translucent'/>
361
+ <Label text="draft" style="translucent" />
331
362
  <span className="sd-margin-s--auto">
332
- <AvatarGroup
333
- size="x-small"
334
- items={avatars}
335
- />
363
+ <AvatarGroup size="x-small" items={avatars} />
336
364
  </span>
337
365
  </div>
338
366
  </div>
339
367
  <div className="sd-list-item__action-menu sd-list-item__action-menu--direction-row ps-0">
340
- <ButtonGroup orientation='vertical' spaces='compact'>
341
- <IconButton size='small' icon='external' ariaValue='Open in modal' onClick={()=> false} />
342
- <IconButton size='small' icon='trash' ariaValue='Delete Coverage' onClick={()=> false} />
368
+ <ButtonGroup orientation="vertical" spaces="compact">
369
+ <IconButton
370
+ size="small"
371
+ icon="external"
372
+ ariaValue="Open in modal"
373
+ onClick={() => false}
374
+ />
375
+ <IconButton
376
+ size="small"
377
+ icon="trash"
378
+ ariaValue="Delete Coverage"
379
+ onClick={() => false}
380
+ />
343
381
  </ButtonGroup>
344
382
  </div>
345
383
  </div>
346
384
  </div>
347
- <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleFour: !prevState.openCollapsibleFour}))}>
348
- <span className='label label--translucent new-collapse-box__divider-label'>
385
+ <button
386
+ className="new-collapse-box__divider"
387
+ onClick={() =>
388
+ this.setState((prevState) => ({
389
+ openCollapsibleFour: !prevState.openCollapsibleFour,
390
+ }))
391
+ }
392
+ >
393
+ <span className="label label--translucent new-collapse-box__divider-label">
349
394
  {this.state.openCollapsibleFour ? 'Show less' : 'Show more'}
350
395
  </span>
351
396
  </button>
352
397
  </div>
353
398
 
354
399
  {/* Content */}
355
- <div className='new-collapse-box__content'>
356
- <div className='new-collapse-box__content-inner p-2 pt-0-5'>
400
+ <div className="new-collapse-box__content">
401
+ <div className="new-collapse-box__content-inner p-2 pt-0-5">
357
402
  <Form.FormGroup>
358
403
  <Form.FormItem>
359
404
  <TreeSelect
@@ -365,12 +410,11 @@ export class TestGround extends React.Component<IProps, IState> {
365
410
  allowMultiple
366
411
  sortable
367
412
  required
368
- label='Language'
413
+ label="Language"
369
414
  onChange={() => false}
370
- placeholder='Add language'
371
- width='medium'
372
- >
373
- </TreeSelect>
415
+ placeholder="Add language"
416
+ width="medium"
417
+ ></TreeSelect>
374
418
  </Form.FormItem>
375
419
  </Form.FormGroup>
376
420
  <Form.FormGroup>
@@ -381,27 +425,27 @@ export class TestGround extends React.Component<IProps, IState> {
381
425
  onChange={(date) => {
382
426
  this.setState({date});
383
427
  }}
384
- label='Planning date'
428
+ label="Planning date"
385
429
  />
386
430
  </Form.FormItem>
387
431
  <Form.FormItem>
388
- <TimePicker
389
- value={this.state.time}
390
- onChange={(time) => {
391
- this.setState({time});
392
- }}
393
- allowSeconds
394
- label='Planning time'
395
- labelHidden
396
- />
432
+ <TimePicker
433
+ value={this.state.time}
434
+ onChange={(time) => {
435
+ this.setState({time});
436
+ }}
437
+ allowSeconds
438
+ label="Planning time"
439
+ labelHidden
440
+ />
397
441
  </Form.FormItem>
398
442
  </Form.FormGroup>
399
443
  <Form.FormGroup>
400
444
  <Form.FormItem>
401
445
  <Input
402
- label='Slugline'
446
+ label="Slugline"
403
447
  value={''}
404
- type='text'
448
+ type="text"
405
449
  tabindex={0}
406
450
  onChange={(value) => this.setState({value: value})}
407
451
  />
@@ -410,9 +454,9 @@ export class TestGround extends React.Component<IProps, IState> {
410
454
  <Form.FormGroup>
411
455
  <Form.FormItem>
412
456
  <Input
413
- label='Name'
457
+ label="Name"
414
458
  value={''}
415
- type='text'
459
+ type="text"
416
460
  tabindex={0}
417
461
  onChange={(value) => this.setState({value: value})}
418
462
  />
@@ -421,9 +465,9 @@ export class TestGround extends React.Component<IProps, IState> {
421
465
  <Form.FormGroup>
422
466
  <Form.FormItem>
423
467
  <Input
424
- label='Headline'
468
+ label="Headline"
425
469
  value={''}
426
- type='text'
470
+ type="text"
427
471
  tabindex={0}
428
472
  onChange={(value) => this.setState({value: value})}
429
473
  />
@@ -433,11 +477,11 @@ export class TestGround extends React.Component<IProps, IState> {
433
477
  <Form.FormItem>
434
478
  <Select
435
479
  value={this.state.value}
436
- label='Priority'
480
+ label="Priority"
437
481
  onChange={(value) => {
438
482
  this.setState({
439
483
  value: value,
440
- })
484
+ });
441
485
  }}
442
486
  >
443
487
  <Option>None</Option>
@@ -458,20 +502,19 @@ export class TestGround extends React.Component<IProps, IState> {
458
502
  getOptions={() => options4}
459
503
  getLabel={(item) => item.name}
460
504
  getId={(item) => item.name}
461
- label='Place'
505
+ label="Place"
462
506
  onChange={() => false}
463
- placeholder='Select place'
464
- width='match-input'
465
- >
466
- </TreeSelect>
507
+ placeholder="Select place"
508
+ width="match-input"
509
+ ></TreeSelect>
467
510
  </Form.FormItem>
468
511
  </Form.FormGroup>
469
512
  <Form.FormGroup>
470
513
  <Form.FormItem>
471
514
  <Input
472
- label='Description'
515
+ label="Description"
473
516
  value={''}
474
- type='text'
517
+ type="text"
475
518
  tabindex={0}
476
519
  onChange={(value) => this.setState({value: value})}
477
520
  />
@@ -480,35 +523,48 @@ export class TestGround extends React.Component<IProps, IState> {
480
523
  <Form.FormGroup>
481
524
  <Form.FormItem>
482
525
  <Input
483
- label='Internal note'
526
+ label="Internal note"
484
527
  value={''}
485
- type='text'
528
+ type="text"
486
529
  tabindex={0}
487
530
  onChange={(value) => this.setState({value: value})}
488
531
  />
489
532
  </Form.FormItem>
490
533
  </Form.FormGroup>
491
- <div className='d-flex items-center justify-between mb-1-5'>
492
- <Heading type='h4'>Coverages</Heading>
493
- <Button type="primary" icon="plus-large" text="plus-large" size='small' shape="round" iconOnly={true} onClick={()=> false} />
534
+ <div className="d-flex items-center justify-between mb-1-5">
535
+ <Heading type="h4">Coverages</Heading>
536
+ <Button
537
+ type="primary"
538
+ icon="plus-large"
539
+ text="plus-large"
540
+ size="small"
541
+ shape="round"
542
+ iconOnly={true}
543
+ onClick={() => false}
544
+ />
494
545
  </div>
495
- <div className='sd-border--medium border-dashed p-1-5 radius-md d-flex items-center justify-center'>
496
- <span className='text-sm text-color-subdued'>No Coverages yet</span>
546
+ <div className="sd-border--medium border-dashed p-1-5 radius-md d-flex items-center justify-center">
547
+ <span className="text-sm text-color-subdued">No Coverages yet</span>
497
548
  </div>
498
549
 
499
550
  {/* <ContentDivider type="dashed" margin='x-small' /> */}
500
551
 
501
552
  {/* NESTED BOX */}
502
- <div className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFive ? 'new-collapse-box--open' : ''}`}>
553
+ <div
554
+ className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFive ? 'new-collapse-box--open' : ''}`}
555
+ >
503
556
  {/* Header */}
504
- <div className='new-collapse-box__header'>
505
- <div className='new-collapse-box__header-inner'>
506
- <div role="listitem" className="sd-list-item sd-list-item--no-hover hide-on-open">
557
+ <div className="new-collapse-box__header">
558
+ <div className="new-collapse-box__header-inner">
559
+ <div
560
+ role="listitem"
561
+ className="sd-list-item sd-list-item--no-hover hide-on-open"
562
+ >
507
563
  <div className="sd-list-item__column sd-list-item__column--no-border pe-1">
508
564
  <Avatar
509
565
  displayName="Jeffrey Lebowski"
510
566
  imageUrl={null}
511
- initials='JL'
567
+ initials="JL"
512
568
  size="medium"
513
569
  icon={{name: 'photo', color: 'var(--sd-colour-highlight)'}}
514
570
  />
@@ -517,13 +573,19 @@ export class TestGround extends React.Component<IProps, IState> {
517
573
  <div className="sd-list-item__row">
518
574
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
519
575
  <span className="sd-list-item__compound-text">
520
- <span className="sd-list-item__text-strong">Photo</span>
576
+ <span className="sd-list-item__text-strong">
577
+ Photo
578
+ </span>
521
579
  <span className="sd-list-item__text-light">//</span>
522
580
  <span className="sd-list-item__text">Archive</span>
523
581
  </span>
524
-
525
582
  </span>
526
- <time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
583
+ <time
584
+ className="sd-margin-s--auto"
585
+ title="June 01, 2022 11:08 AM"
586
+ >
587
+ 11:08, 01.06.2022
588
+ </time>
527
589
  </div>
528
590
  <div className="sd-list-item__row sd-list-item__row--overflow-visible mb-1-5">
529
591
  <span className="sd-list-item__compound-text">
@@ -531,89 +593,124 @@ export class TestGround extends React.Component<IProps, IState> {
531
593
  <span>Sports</span>
532
594
  </span>
533
595
  <span className="sd-list-item__compound-text">
534
- <span className="sd-list-item__text-label">Assignee:</span>
596
+ <span className="sd-list-item__text-label">
597
+ Assignee:
598
+ </span>
535
599
  <span>Jeffrey Lebowski</span>
536
600
  </span>
537
- <span className='sd-margin-s--auto'>
538
- <Label text='draft' style='translucent' type='default'/>
601
+ <span className="sd-margin-s--auto">
602
+ <Label
603
+ text="draft"
604
+ style="translucent"
605
+ type="default"
606
+ />
539
607
  </span>
540
608
  </div>
541
609
  </div>
542
610
  <div className="sd-list-item__action-menu sd-list-item__action-menu--direction-row">
543
611
  <div className="side-panel__top-tools-right">
544
- <button id="coverages[0]-item-actions" className="icn-btn dropdown__toggle" title="Actions" aria-label="More actions">
612
+ <button
613
+ id="coverages[0]-item-actions"
614
+ className="icn-btn dropdown__toggle"
615
+ title="Actions"
616
+ aria-label="More actions"
617
+ >
545
618
  <i className="icon-dots-vertical"></i>
546
619
  </button>
547
620
  </div>
548
621
  </div>
549
622
  </div>
550
623
  </div>
551
- <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleFive: !prevState.openCollapsibleFive}))}>
552
- <span className='label label--translucent new-collapse-box__divider-label'>
624
+ <button
625
+ className="new-collapse-box__divider"
626
+ onClick={() =>
627
+ this.setState((prevState) => ({
628
+ openCollapsibleFive: !prevState.openCollapsibleFive,
629
+ }))
630
+ }
631
+ >
632
+ <span className="label label--translucent new-collapse-box__divider-label">
553
633
  {this.state.openCollapsibleFive ? 'Show less' : 'Show more'}
554
634
  </span>
555
635
  </button>
556
636
  </div>
557
637
 
558
638
  {/* Content */}
559
- <div className='new-collapse-box__content'>
560
- <div className='new-collapse-box__content-inner p-2 pt-0-5'>
561
- <Container className='sd-border--mediu sd-panel-bg--000 p-1-5 radius-lg sd-shadow--z1 mb-3'>
562
- <div role="listitem" className="sd-list-item sd-list-item--no-hover flex-grow">
639
+ <div className="new-collapse-box__content">
640
+ <div className="new-collapse-box__content-inner p-2 pt-0-5">
641
+ <Container className="sd-border--mediu sd-panel-bg--000 p-1-5 radius-lg sd-shadow--z1 mb-3">
642
+ <div
643
+ role="listitem"
644
+ className="sd-list-item sd-list-item--no-hover flex-grow"
645
+ >
563
646
  <div className="sd-list-item__column sd-list-item__column--no-border px-0">
564
- <Avatar
565
- displayName="Jeffrey Lebowski"
566
- imageUrl={null}
567
- initials='JL'
568
- size="large"
569
- />
570
-
647
+ <Avatar
648
+ displayName="Jeffrey Lebowski"
649
+ imageUrl={null}
650
+ initials="JL"
651
+ size="large"
652
+ />
571
653
  </div>
572
654
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border gap-0-5">
573
655
  <div className="sd-list-item__row m-0 flex-grow">
574
656
  <span className="sd-overflow-ellipsis flex-grow">
575
657
  <span className="sd-list-item__compound-text">
576
- <span className="sd-list-item__text-strong">Photo</span>
577
- <span className="sd-list-item__text-light">//</span>
578
- <span className="sd-list-item__text">Archive</span>
658
+ <span className="sd-list-item__text-strong">
659
+ Photo
660
+ </span>
661
+ <span className="sd-list-item__text-light">
662
+ //
663
+ </span>
664
+ <span className="sd-list-item__text">
665
+ Archive
666
+ </span>
579
667
  </span>
580
-
581
-
582
668
  </span>
583
- <Label text='Draft' style='translucent' type='default' />
669
+ <Label
670
+ text="Draft"
671
+ style="translucent"
672
+ type="default"
673
+ />
584
674
  </div>
585
675
  <div className="sd-list-item__row sd-list-item__row--overflow-visible m-0 flex-grow">
586
676
  <span className="sd-list-item__compound-text">
587
- <span className="sd-list-item__text-label">Desk:</span>
677
+ <span className="sd-list-item__text-label">
678
+ Desk:
679
+ </span>
588
680
  <span>Sports</span>
589
681
  </span>
590
682
  <span className="sd-list-item__compound-text">
591
- <span className="sd-list-item__text-label">Assignee:</span>
683
+ <span className="sd-list-item__text-label">
684
+ Assignee:
685
+ </span>
592
686
  <span>Jeffrey Lebowski</span>
593
687
  </span>
594
688
  </div>
595
689
  </div>
596
690
  <div className="sd-list-item__column px-0 gap-0-5">
597
691
  <div className="sd-list-item__row justify-end m-0 flex-grow">
598
- <button className="btn btn btn--hollow btn--small">Reassign</button>
692
+ <button className="btn btn btn--hollow btn--small">
693
+ Reassign
694
+ </button>
599
695
  </div>
600
696
  <div className="sd-list-item__row justify-end m-0 flex-grow">
601
- <button className="btn btn btn--hollow btn--small">Remove</button>
697
+ <button className="btn btn btn--hollow btn--small">
698
+ Remove
699
+ </button>
602
700
  </div>
603
701
  </div>
604
702
  </div>
605
-
606
703
  </Container>
607
704
  <Form.FormGroup>
608
705
  <Form.FormItem>
609
706
  <Select
610
707
  value={this.state.value}
611
- label='Coverage type'
708
+ label="Coverage type"
612
709
  required
613
710
  onChange={(value) => {
614
711
  this.setState({
615
712
  value: value,
616
- })
713
+ });
617
714
  }}
618
715
  >
619
716
  <Option>None</Option>
@@ -631,11 +728,11 @@ export class TestGround extends React.Component<IProps, IState> {
631
728
  <Form.FormItem>
632
729
  <Select
633
730
  value={this.state.value}
634
- label='Genre'
731
+ label="Genre"
635
732
  onChange={(value) => {
636
733
  this.setState({
637
734
  value: value,
638
- })
735
+ });
639
736
  }}
640
737
  >
641
738
  <Option>Article (news)</Option>
@@ -652,9 +749,9 @@ export class TestGround extends React.Component<IProps, IState> {
652
749
  <Form.FormGroup>
653
750
  <Form.FormItem>
654
751
  <Input
655
- label='Slugline'
752
+ label="Slugline"
656
753
  value={''}
657
- type='text'
754
+ type="text"
658
755
  tabindex={0}
659
756
  onChange={(value) => this.setState({value: value})}
660
757
  />
@@ -663,9 +760,9 @@ export class TestGround extends React.Component<IProps, IState> {
663
760
  <Form.FormGroup>
664
761
  <Form.FormItem>
665
762
  <Input
666
- label='Ed note'
763
+ label="Ed note"
667
764
  value={''}
668
- type='text'
765
+ type="text"
669
766
  tabindex={0}
670
767
  onChange={(value) => this.setState({value: value})}
671
768
  />
@@ -674,9 +771,9 @@ export class TestGround extends React.Component<IProps, IState> {
674
771
  <Form.FormGroup>
675
772
  <Form.FormItem>
676
773
  <Input
677
- label='Internal note'
774
+ label="Internal note"
678
775
  value={''}
679
- type='text'
776
+ type="text"
680
777
  tabindex={0}
681
778
  onChange={(value) => this.setState({value: value})}
682
779
  />
@@ -686,11 +783,11 @@ export class TestGround extends React.Component<IProps, IState> {
686
783
  <Form.FormItem>
687
784
  <Select
688
785
  value={this.state.value}
689
- label='Coverage Status'
786
+ label="Coverage Status"
690
787
  onChange={(value) => {
691
788
  this.setState({
692
789
  value: value,
693
- })
790
+ });
694
791
  }}
695
792
  >
696
793
  <Option>Planned</Option>
@@ -709,7 +806,7 @@ export class TestGround extends React.Component<IProps, IState> {
709
806
  onChange={(date) => {
710
807
  this.setState({date});
711
808
  }}
712
- label='Due'
809
+ label="Due"
713
810
  />
714
811
  </Form.FormItem>
715
812
  <Form.FormItem>
@@ -719,7 +816,7 @@ export class TestGround extends React.Component<IProps, IState> {
719
816
  this.setState({time});
720
817
  }}
721
818
  allowSeconds
722
- label='Planning time'
819
+ label="Planning time"
723
820
  labelHidden
724
821
  />
725
822
  </Form.FormItem>
@@ -732,21 +829,20 @@ export class TestGround extends React.Component<IProps, IState> {
732
829
  getOptions={() => options3}
733
830
  getLabel={(item) => item.name}
734
831
  getId={(item) => item.name}
735
- label='Language'
832
+ label="Language"
736
833
  onChange={() => false}
737
- placeholder='Select place'
834
+ placeholder="Select place"
738
835
  required
739
- width='match-input'
740
- >
741
- </TreeSelect>
836
+ width="match-input"
837
+ ></TreeSelect>
742
838
  </Form.FormItem>
743
839
  </Form.FormGroup>
744
840
  <Form.FormGroup>
745
841
  <Form.FormItem>
746
842
  <Input
747
- label='Coverage contact'
843
+ label="Coverage contact"
748
844
  value={''}
749
- type='text'
845
+ type="text"
750
846
  tabindex={0}
751
847
  onChange={(value) => this.setState({value: value})}
752
848
  />
@@ -755,20 +851,27 @@ export class TestGround extends React.Component<IProps, IState> {
755
851
  <Form.FormGroup>
756
852
  <Form.FormItem>
757
853
  <Input
758
- label='Headline'
854
+ label="Headline"
759
855
  value={''}
760
- type='text'
856
+ type="text"
761
857
  tabindex={0}
762
858
  onChange={(value) => this.setState({value: value})}
763
859
  />
764
860
  </Form.FormItem>
765
861
  </Form.FormGroup>
766
- <div className='mb-1'>
767
- <FormLabel text='Attachments' />
862
+ <div className="mb-1">
863
+ <FormLabel text="Attachments" />
768
864
  <div className="basic-drag-block mt-0-5">
769
- <Icon size='big' name='upload-alt' /> <span className="basic-drag-block__text"> Drag files here or</span> <a className="text-link" href="">browse</a>.
865
+ <Icon size="big" name="upload-alt" />{' '}
866
+ <span className="basic-drag-block__text">
867
+ {' '}
868
+ Drag files here or
869
+ </span>{' '}
870
+ <a className="text-link" href="">
871
+ browse
872
+ </a>
873
+ .
770
874
  </div>
771
-
772
875
  </div>
773
876
  </div>
774
877
  </div>
@@ -782,7 +885,7 @@ export class TestGround extends React.Component<IProps, IState> {
782
885
  <Avatar
783
886
  displayName="Jeffrey Lebowski"
784
887
  imageUrl={null}
785
- initials='JL'
888
+ initials="JL"
786
889
  size="small"
787
890
  statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
788
891
  icon={{name: 'text'}}
@@ -790,93 +893,116 @@ export class TestGround extends React.Component<IProps, IState> {
790
893
 
791
894
  <hr />
792
895
 
793
-
794
- <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}>
896
+ <div
897
+ style={{maxWidth: '600px'}}
898
+ className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}
899
+ >
795
900
  {/* Header */}
796
- <div className='new-collapse-box__header'>
797
- <div className='new-collapse-box__header-inner'>
901
+ <div className="new-collapse-box__header">
902
+ <div className="new-collapse-box__header-inner">
798
903
  <div role="listitem" className="sd-list-item sd-list-item--no-hover">
799
904
  <div className="sd-list-item__border sd-list-item__border--locked"></div>
800
905
  <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
801
- <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
906
+ <Icon type="primary" name="calendar" scale="1.5x" ariaHidden={true} />
802
907
  </div>
803
908
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
804
909
  <div className="sd-list-item__row">
805
910
  <span className="sd-list-item__slugline">Planning Slug</span>
806
911
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
807
- <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
912
+ <span className="sd-list-item__text-strong">
913
+ Cras justo odio, dapibus ac facilisis in.
914
+ </span>
808
915
  </span>
809
916
  </div>
810
917
  <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
811
- <Label text='draft' style='translucent'/>
918
+ <Label text="draft" style="translucent" />
812
919
  <span className="sd-margin-s--auto">
813
- <AvatarGroup
814
- size="x-small"
815
- items={avatars}
816
- />
920
+ <AvatarGroup size="x-small" items={avatars} />
817
921
  </span>
818
922
  </div>
819
923
  </div>
820
924
  </div>
821
925
  </div>
822
- <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleOne: !prevState.openCollapsibleOne}))}>
823
- <span className='label label--translucent new-collapse-box__divider-label'>
926
+ <button
927
+ className="new-collapse-box__divider"
928
+ onClick={() =>
929
+ this.setState((prevState) => ({
930
+ openCollapsibleOne: !prevState.openCollapsibleOne,
931
+ }))
932
+ }
933
+ >
934
+ <span className="label label--translucent new-collapse-box__divider-label">
824
935
  {this.state.openCollapsibleOne ? 'Show less' : 'Show more'}
825
936
  </span>
826
937
  </button>
827
938
  </div>
828
939
 
829
940
  {/* Content */}
830
- <div className='new-collapse-box__content'>
831
- <div className='new-collapse-box__content-inner p-2 pt-0-5'>
941
+ <div className="new-collapse-box__content">
942
+ <div className="new-collapse-box__content-inner p-2 pt-0-5">
832
943
  <div>
833
- <FormLabel text='Name'/>
834
- <Text size='small' weight='medium'>Australian Open 2024</Text>
944
+ <FormLabel text="Name" />
945
+ <Text size="small" weight="medium">
946
+ Australian Open 2024
947
+ </Text>
835
948
  </div>
836
- <ContentDivider type="dashed" margin='x-small' />
949
+ <ContentDivider type="dashed" margin="x-small" />
837
950
  <div>
838
- <FormLabel text='Current Date'/>
839
- <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
951
+ <FormLabel text="Current Date" />
952
+ <Text size="small" weight="medium">
953
+ 05.02.2024 @ 10:00
954
+ </Text>
840
955
  </div>
841
- <ContentDivider type="dashed" margin='x-small' />
956
+ <ContentDivider type="dashed" margin="x-small" />
842
957
  <div>
843
- <FormLabel text='Current Repeat Summary'/>
844
- <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
958
+ <FormLabel text="Current Repeat Summary" />
959
+ <Text size="small" weight="medium">
960
+ Every 1 day(s) until CET 28 Feb 2024
961
+ </Text>
845
962
  </div>
846
- <ContentDivider type="dashed" margin='x-small' />
963
+ <ContentDivider type="dashed" margin="x-small" />
847
964
  <div>
848
- <FormLabel text='No. of events'/>
849
- <Text size='small' weight='medium'>1</Text>
965
+ <FormLabel text="No. of events" />
966
+ <Text size="small" weight="medium">
967
+ 1
968
+ </Text>
850
969
  </div>
851
- <ContentDivider type="dashed" margin='x-small' />
970
+ <ContentDivider type="dashed" margin="x-small" />
852
971
 
853
972
  {/* NESTED BOX */}
854
- <div className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleTwo ? 'new-collapse-box--open' : ''}`}>
973
+ <div
974
+ className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleTwo ? 'new-collapse-box--open' : ''}`}
975
+ >
855
976
  {/* Header */}
856
- <div className='new-collapse-box__header'>
857
- <div className='new-collapse-box__header-inner'>
977
+ <div className="new-collapse-box__header">
978
+ <div className="new-collapse-box__header-inner">
858
979
  <div role="listitem" className="sd-list-item sd-list-item--no-hover">
859
980
  <div className="sd-list-item__column sd-list-item__column--no-border pe-1">
860
- <Avatar
861
- displayName="Jeffrey Lebowski"
862
- imageUrl={null}
863
- initials='JL'
864
- size="medium"
865
- icon={{name: 'photo', color: 'var(--sd-colour-highlight)'}}
866
- />
867
-
981
+ <Avatar
982
+ displayName="Jeffrey Lebowski"
983
+ imageUrl={null}
984
+ initials="JL"
985
+ size="medium"
986
+ icon={{name: 'photo', color: 'var(--sd-colour-highlight)'}}
987
+ />
868
988
  </div>
869
989
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
870
990
  <div className="sd-list-item__row">
871
991
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
872
992
  <span className="sd-list-item__compound-text">
873
- <span className="sd-list-item__text-strong">Photo</span>
993
+ <span className="sd-list-item__text-strong">
994
+ Photo
995
+ </span>
874
996
  <span className="sd-list-item__text-light">//</span>
875
997
  <span className="sd-list-item__text">Archive</span>
876
998
  </span>
877
-
878
999
  </span>
879
- <time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
1000
+ <time
1001
+ className="sd-margin-s--auto"
1002
+ title="June 01, 2022 11:08 AM"
1003
+ >
1004
+ 11:08, 01.06.2022
1005
+ </time>
880
1006
  </div>
881
1007
  <div className="sd-list-item__row sd-list-item__row--overflow-visible mb-1-5">
882
1008
  <span className="sd-list-item__compound-text">
@@ -884,44 +1010,65 @@ export class TestGround extends React.Component<IProps, IState> {
884
1010
  <span>Sports</span>
885
1011
  </span>
886
1012
  <span className="sd-list-item__compound-text">
887
- <span className="sd-list-item__text-label">Assignee:</span>
1013
+ <span className="sd-list-item__text-label">
1014
+ Assignee:
1015
+ </span>
888
1016
  <span>Jeffrey Lebowski</span>
889
1017
  </span>
890
- <span className='sd-margin-s--auto'>
891
- <Label text='in progress' style='translucent' type='success'/>
1018
+ <span className="sd-margin-s--auto">
1019
+ <Label
1020
+ text="in progress"
1021
+ style="translucent"
1022
+ type="success"
1023
+ />
892
1024
  </span>
893
1025
  </div>
894
1026
  </div>
895
1027
  </div>
896
1028
  </div>
897
- <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleTwo: !prevState.openCollapsibleTwo}))}>
898
- <span className='label label--translucent new-collapse-box__divider-label'>
1029
+ <button
1030
+ className="new-collapse-box__divider"
1031
+ onClick={() =>
1032
+ this.setState((prevState) => ({
1033
+ openCollapsibleTwo: !prevState.openCollapsibleTwo,
1034
+ }))
1035
+ }
1036
+ >
1037
+ <span className="label label--translucent new-collapse-box__divider-label">
899
1038
  {this.state.openCollapsibleTwo ? 'Show less' : 'Show more'}
900
1039
  </span>
901
1040
  </button>
902
1041
  </div>
903
1042
 
904
1043
  {/* Content */}
905
- <div className='new-collapse-box__content'>
906
- <div className='new-collapse-box__content-inner p-2 pt-0-5'>
1044
+ <div className="new-collapse-box__content">
1045
+ <div className="new-collapse-box__content-inner p-2 pt-0-5">
907
1046
  <div>
908
- <FormLabel text='Name'/>
909
- <Text size='small' weight='medium'>Australian Open 2024</Text>
1047
+ <FormLabel text="Name" />
1048
+ <Text size="small" weight="medium">
1049
+ Australian Open 2024
1050
+ </Text>
910
1051
  </div>
911
- <ContentDivider type="dashed" margin='x-small' />
1052
+ <ContentDivider type="dashed" margin="x-small" />
912
1053
  <div>
913
- <FormLabel text='Current Date'/>
914
- <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
1054
+ <FormLabel text="Current Date" />
1055
+ <Text size="small" weight="medium">
1056
+ 05.02.2024 @ 10:00
1057
+ </Text>
915
1058
  </div>
916
- <ContentDivider type="dashed" margin='x-small' />
1059
+ <ContentDivider type="dashed" margin="x-small" />
917
1060
  <div>
918
- <FormLabel text='Current Repeat Summary'/>
919
- <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
1061
+ <FormLabel text="Current Repeat Summary" />
1062
+ <Text size="small" weight="medium">
1063
+ Every 1 day(s) until CET 28 Feb 2024
1064
+ </Text>
920
1065
  </div>
921
- <ContentDivider type="dashed" margin='x-small' />
1066
+ <ContentDivider type="dashed" margin="x-small" />
922
1067
  <div>
923
- <FormLabel text='No. of events'/>
924
- <Text size='small' weight='medium'>1</Text>
1068
+ <FormLabel text="No. of events" />
1069
+ <Text size="small" weight="medium">
1070
+ 1
1071
+ </Text>
925
1072
  </div>
926
1073
  {/* <ContentDivider type="dashed" margin='x-small' /> */}
927
1074
  </div>
@@ -933,97 +1080,134 @@ export class TestGround extends React.Component<IProps, IState> {
933
1080
 
934
1081
  {/* Second Collapsible */}
935
1082
 
936
- <div style={{maxWidth: '600px'}} className={`mt-2 sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleThree ? 'new-collapse-box--open' : ''}`}>
1083
+ <div
1084
+ style={{maxWidth: '600px'}}
1085
+ className={`mt-2 sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleThree ? 'new-collapse-box--open' : ''}`}
1086
+ >
937
1087
  {/* Header */}
938
- <div className='new-collapse-box__header'>
939
- <div className='new-collapse-box__header-inner'>
1088
+ <div className="new-collapse-box__header">
1089
+ <div className="new-collapse-box__header-inner">
940
1090
  <div role="listitem" className="sd-list-item sd-list-item--no-hover">
941
1091
  <div className="sd-list-item__border sd-list-item__border--active"></div>
942
1092
  <div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
943
- <Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
1093
+ <Icon type="primary" name="calendar" scale="1.5x" ariaHidden={true} />
944
1094
  </div>
945
1095
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
946
1096
  <div className="sd-list-item__row">
947
1097
  <span className="sd-list-item__slugline">Planning Item Slug</span>
948
1098
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
949
- <span className="sd-list-item__text-strong">Aenean eu leo quam. Pellentesque ornare sem lacinia quam</span>
1099
+ <span className="sd-list-item__text-strong">
1100
+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam
1101
+ </span>
950
1102
  </span>
951
1103
  </div>
952
1104
  <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
953
- <Label text='in progress' type='success' style='translucent'/>
1105
+ <Label text="in progress" type="success" style="translucent" />
954
1106
  <span className="sd-margin-s--auto">
955
- <AvatarGroup
956
- size="x-small"
957
- items={avatars}
958
- />
1107
+ <AvatarGroup size="x-small" items={avatars} />
959
1108
  </span>
960
1109
  </div>
961
1110
  </div>
962
1111
  </div>
963
1112
  </div>
964
- <button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleThree: !prevState.openCollapsibleThree}))}>
965
- <span className='label label--translucent new-collapse-box__divider-label'>
1113
+ <button
1114
+ className="new-collapse-box__divider"
1115
+ onClick={() =>
1116
+ this.setState((prevState) => ({
1117
+ openCollapsibleThree: !prevState.openCollapsibleThree,
1118
+ }))
1119
+ }
1120
+ >
1121
+ <span className="label label--translucent new-collapse-box__divider-label">
966
1122
  {this.state.openCollapsibleThree ? 'Show less' : 'Show more'}
967
1123
  </span>
968
1124
  </button>
969
1125
  </div>
970
1126
 
971
1127
  {/* Content */}
972
- <div className='new-collapse-box__content'>
973
- <div className='new-collapse-box__content-inner p-2 pt-0-5'>
1128
+ <div className="new-collapse-box__content">
1129
+ <div className="new-collapse-box__content-inner p-2 pt-0-5">
974
1130
  <div>
975
- <FormLabel text='Name'/>
976
- <Text size='small' weight='medium'>Australian Open 2024</Text>
1131
+ <FormLabel text="Name" />
1132
+ <Text size="small" weight="medium">
1133
+ Australian Open 2024
1134
+ </Text>
977
1135
  </div>
978
- <ContentDivider type="dashed" margin='x-small' />
1136
+ <ContentDivider type="dashed" margin="x-small" />
979
1137
  <div>
980
- <FormLabel text='Current Date'/>
981
- <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
1138
+ <FormLabel text="Current Date" />
1139
+ <Text size="small" weight="medium">
1140
+ 05.02.2024 @ 10:00
1141
+ </Text>
982
1142
  </div>
983
- <ContentDivider type="dashed" margin='x-small' />
1143
+ <ContentDivider type="dashed" margin="x-small" />
984
1144
  <div>
985
- <FormLabel text='Current Repeat Summary'/>
986
- <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
1145
+ <FormLabel text="Current Repeat Summary" />
1146
+ <Text size="small" weight="medium">
1147
+ Every 1 day(s) until CET 28 Feb 2024
1148
+ </Text>
987
1149
  </div>
988
- <ContentDivider type="dashed" margin='x-small' />
1150
+ <ContentDivider type="dashed" margin="x-small" />
989
1151
  <div>
990
- <FormLabel text='No. of events'/>
991
- <Text size='small' weight='medium'>1</Text>
1152
+ <FormLabel text="No. of events" />
1153
+ <Text size="small" weight="medium">
1154
+ 1
1155
+ </Text>
992
1156
  </div>
993
- <ContentDivider type="dashed" margin='x-small' />
1157
+ <ContentDivider type="dashed" margin="x-small" />
994
1158
  </div>
995
1159
  </div>
996
1160
  </div>
997
1161
 
998
1162
  <hr />
999
1163
 
1000
- <SubNav color='darker'>
1001
- <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'>
1164
+ <SubNav color="darker">
1165
+ <Tooltip
1166
+ text={this.state.isExpanded ? 'Revert Authoring' : 'Expand Authoring'}
1167
+ flow="right"
1168
+ >
1002
1169
  <button
1003
- className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
1170
+ className={`expand-button ${this.state.isExpanded ? 'expand-button--expanded' : ''}`}
1004
1171
  onClick={this.toggleExpand}
1005
1172
  >
1006
- <Icon name='chevron-left-thin' />
1173
+ <Icon name="chevron-left-thin" />
1007
1174
  </button>
1008
1175
  </Tooltip>
1009
- <div className='text-2xs text-uppercase d-flex ms-2 gap-0-5'>
1010
- <span className='font-medium'>News desk</span>
1011
- <span className='font-light text-color-subdued'>/</span>
1012
- <span className='text-color-muted'>Working stage</span>
1176
+ <div className="text-2xs text-uppercase d-flex ms-2 gap-0-5">
1177
+ <span className="font-medium">News desk</span>
1178
+ <span className="font-light text-color-subdued">/</span>
1179
+ <span className="text-color-muted">Working stage</span>
1013
1180
  </div>
1014
- <ButtonGroup align='end'>
1015
- <Button text="Cancel" onClick={()=> false} type="default" />
1016
- <Button text="Save" onClick={()=> false} type="primary" />
1181
+ <ButtonGroup align="end">
1182
+ <Button text="Cancel" onClick={() => false} type="default" />
1183
+ <Button text="Save" onClick={() => false} type="primary" />
1017
1184
  <Divider size="mini" />
1018
1185
  <ButtonGroup subgroup={true} spaces="no-space">
1019
- <Tooltip text='Minimize' flow='left'>
1020
- <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
1186
+ <Tooltip text="Minimize" flow="left">
1187
+ <NavButton
1188
+ type="default"
1189
+ icon="minimize"
1190
+ iconSize="big"
1191
+ text="Minimize"
1192
+ onClick={() => false}
1193
+ />
1021
1194
  </Tooltip>
1022
- <Tooltip text='More actions' flow='left'>
1023
- <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
1195
+ <Tooltip text="More actions" flow="left">
1196
+ <NavButton
1197
+ type="default"
1198
+ icon="dots-vertical"
1199
+ text="More actions"
1200
+ onClick={() => false}
1201
+ />
1024
1202
  </Tooltip>
1025
- <Tooltip text='Send to / Publish' flow='left'>
1026
- <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
1203
+ <Tooltip text="Send to / Publish" flow="left">
1204
+ <NavButton
1205
+ type="highlight"
1206
+ icon="send-to"
1207
+ iconSize="big"
1208
+ text="Send to / Publish"
1209
+ onClick={() => false}
1210
+ />
1027
1211
  </Tooltip>
1028
1212
  </ButtonGroup>
1029
1213
  </ButtonGroup>
@@ -1031,78 +1215,113 @@ export class TestGround extends React.Component<IProps, IState> {
1031
1215
 
1032
1216
  <hr />
1033
1217
 
1034
- <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
1035
-
1036
- <IllustrationButton text='Headlines' onClick={()=> false}>
1037
- <SvgIconIllustration illustration='headlines' />
1218
+ <div
1219
+ className="sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin"
1220
+ style={{width: '290px'}}
1221
+ >
1222
+ <IllustrationButton text="Headlines" onClick={() => false}>
1223
+ <SvgIconIllustration illustration="headlines" />
1038
1224
  </IllustrationButton>
1039
1225
 
1040
- <IllustrationButton text='Keywords' onClick={()=> false}>
1041
- <SvgIconIllustration illustration='keywords' />
1226
+ <IllustrationButton text="Keywords" onClick={() => false}>
1227
+ <SvgIconIllustration illustration="keywords" />
1042
1228
  </IllustrationButton>
1043
1229
 
1044
- <IllustrationButton text='Optimise' onClick={()=> false}>
1045
- <SvgIconIllustration illustration='optimise' />
1230
+ <IllustrationButton text="Optimise" onClick={() => false}>
1231
+ <SvgIconIllustration illustration="optimise" />
1046
1232
  </IllustrationButton>
1047
1233
 
1048
- <IllustrationButton text='Summary' onClick={()=> false}>
1049
- <SvgIconIllustration illustration='summary' />
1234
+ <IllustrationButton text="Summary" onClick={() => false}>
1235
+ <SvgIconIllustration illustration="summary" />
1050
1236
  </IllustrationButton>
1051
1237
 
1052
- <IllustrationButton text='Translate' onClick={()=> false}>
1053
- <SvgIconIllustration illustration='translate' />
1238
+ <IllustrationButton text="Translate" onClick={() => false}>
1239
+ <SvgIconIllustration illustration="translate" />
1054
1240
  </IllustrationButton>
1055
-
1056
1241
  </div>
1057
1242
 
1058
1243
  <hr />
1059
1244
 
1060
- <Heading type='h3'>Below is an example structure of the content inside the 'Headlines' AI Assistant section</Heading>
1061
- <Text size="small" weight="light">Note: The surrounding div with inline styles is only there for the purpose of this demo. </Text>
1245
+ <Heading type="h3">
1246
+ Below is an example structure of the content inside the 'Headlines' AI Assistant section
1247
+ </Heading>
1248
+ <Text size="small" weight="light">
1249
+ Note: The surrounding div with inline styles is only there for the purpose of this
1250
+ demo.{' '}
1251
+ </Text>
1062
1252
 
1063
- <div className='' style={{width:'290px', marginBlockStart:'32px'}}>
1064
- <Container gap="small" direction='column'>
1253
+ <div className="" style={{width: '290px', marginBlockStart: '32px'}}>
1254
+ <Container gap="small" direction="column">
1065
1255
  <Text size="small" weight="medium">
1066
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et aenean eu leo quam ultricies.
1256
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et aenean eu leo
1257
+ quam ultricies.
1067
1258
  </Text>
1068
1259
  <ButtonGroup>
1069
- <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
1070
- <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
1260
+ <Button
1261
+ size="small"
1262
+ text="Apply"
1263
+ onClick={() => false}
1264
+ type="default"
1265
+ style="hollow"
1266
+ />
1267
+ <IconButton ariaValue="Copy" icon="copy" onClick={() => false} />
1071
1268
  </ButtonGroup>
1072
1269
  </Container>
1073
1270
 
1074
- <ContentDivider type="dashed" margin='small' />
1271
+ <ContentDivider type="dashed" margin="small" />
1075
1272
 
1076
- <Container gap="small" direction='column'>
1273
+ <Container gap="small" direction="column">
1077
1274
  <Text size="small" weight="medium">
1078
- Aenean eu leo quam pellentesque ornare sem lacinia quam venenatis vestibulum nullam id dolor id nibh ultricies vehicula elit.
1275
+ Aenean eu leo quam pellentesque ornare sem lacinia quam venenatis vestibulum nullam
1276
+ id dolor id nibh ultricies vehicula elit.
1079
1277
  </Text>
1080
1278
  <ButtonGroup>
1081
- <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
1082
- <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
1279
+ <Button
1280
+ size="small"
1281
+ text="Apply"
1282
+ onClick={() => false}
1283
+ type="default"
1284
+ style="hollow"
1285
+ />
1286
+ <IconButton ariaValue="Copy" icon="copy" onClick={() => false} />
1083
1287
  </ButtonGroup>
1084
1288
  </Container>
1085
1289
 
1086
- <ContentDivider type="dashed" margin='small' />
1290
+ <ContentDivider type="dashed" margin="small" />
1087
1291
 
1088
- <Container gap="small" direction='column'>
1292
+ <Container gap="small" direction="column">
1089
1293
  <Text size="small" weight="medium">
1090
- Vestibulum id ligula porta felis euismod semper morbi leo risus, porta ac consectetur ac, vestibulum at eros maecenas faucibus.
1294
+ Vestibulum id ligula porta felis euismod semper morbi leo risus, porta ac
1295
+ consectetur ac, vestibulum at eros maecenas faucibus.
1091
1296
  </Text>
1092
1297
  <ButtonGroup>
1093
- <Button size='small' text="Apply" onClick={()=> false} type="default" style="hollow" />
1094
- <IconButton ariaValue='Copy' icon='copy' onClick={()=> false} />
1298
+ <Button
1299
+ size="small"
1300
+ text="Apply"
1301
+ onClick={() => false}
1302
+ type="default"
1303
+ style="hollow"
1304
+ />
1305
+ <IconButton ariaValue="Copy" icon="copy" onClick={() => false} />
1095
1306
  </ButtonGroup>
1096
1307
  </Container>
1097
-
1098
1308
  </div>
1099
1309
 
1100
1310
  <hr />
1101
1311
 
1102
1312
  <ButtonGroup>
1103
- <Button text="Save Event Modal (Event only)" onClick={() => this.setState({modalSaveEvent: true})} />
1104
- <Button text="Save Event Modal (Event & Planning)" onClick={() => this.setState({modalSaveEvent2: true})} />
1105
- <Button text="Save Event Modal (Planning only)" onClick={() => this.setState({modalSaveEvent3: true})} />
1313
+ <Button
1314
+ text="Save Event Modal (Event only)"
1315
+ onClick={() => this.setState({modalSaveEvent: true})}
1316
+ />
1317
+ <Button
1318
+ text="Save Event Modal (Event & Planning)"
1319
+ onClick={() => this.setState({modalSaveEvent2: true})}
1320
+ />
1321
+ <Button
1322
+ text="Save Event Modal (Planning only)"
1323
+ onClick={() => this.setState({modalSaveEvent3: true})}
1324
+ />
1106
1325
  </ButtonGroup>
1107
1326
 
1108
1327
  <hr />
@@ -1117,45 +1336,60 @@ export class TestGround extends React.Component<IProps, IState> {
1117
1336
 
1118
1337
  <hr />
1119
1338
 
1120
- <Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
1339
+ <Button
1340
+ text="Planning Templates"
1341
+ onClick={() => this.setState({modalPlanningTemplates: true})}
1342
+ />
1121
1343
  <span></span>
1122
1344
 
1123
-
1124
- {/* Event Saving modals */}
1125
- {/* Event Only (This one existed Before) */}
1345
+ {/* Event Saving modals */}
1346
+ {/* Event Only (This one existed Before) */}
1126
1347
  <Modal
1127
1348
  headerTemplate="Save Event"
1128
1349
  visible={this.state.modalSaveEvent}
1129
- contentPadding='medium'
1130
- contentBg='medium'
1131
- size='medium'
1350
+ contentPadding="medium"
1351
+ contentBg="medium"
1352
+ size="medium"
1132
1353
  footerTemplate={modalSaveEventFooterOne}
1133
- onHide={() => {this.setState({modalSaveEvent: false})}}
1354
+ onHide={() => {
1355
+ this.setState({modalSaveEvent: false});
1356
+ }}
1134
1357
  >
1135
1358
  <div>
1136
- <FormLabel text='Name'/>
1137
- <Text size='small' weight='medium'>Australian Open 2024</Text>
1359
+ <FormLabel text="Name" />
1360
+ <Text size="small" weight="medium">
1361
+ Australian Open 2024
1362
+ </Text>
1138
1363
  </div>
1139
- <ContentDivider type="dashed" margin='x-small' />
1364
+ <ContentDivider type="dashed" margin="x-small" />
1140
1365
  <div>
1141
- <FormLabel text='Current Date'/>
1142
- <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
1366
+ <FormLabel text="Current Date" />
1367
+ <Text size="small" weight="medium">
1368
+ 05.02.2024 @ 10:00
1369
+ </Text>
1143
1370
  </div>
1144
- <ContentDivider type="dashed" margin='x-small' />
1371
+ <ContentDivider type="dashed" margin="x-small" />
1145
1372
  <div>
1146
- <FormLabel text='Current Repeat Summary'/>
1147
- <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
1373
+ <FormLabel text="Current Repeat Summary" />
1374
+ <Text size="small" weight="medium">
1375
+ Every 1 day(s) until CET 28 Feb 2024
1376
+ </Text>
1148
1377
  </div>
1149
- <ContentDivider type="dashed" margin='x-small' />
1378
+ <ContentDivider type="dashed" margin="x-small" />
1150
1379
  <div>
1151
- <FormLabel text='No. of events'/>
1152
- <Text size='small' weight='medium'>1</Text>
1380
+ <FormLabel text="No. of events" />
1381
+ <Text size="small" weight="medium">
1382
+ 1
1383
+ </Text>
1153
1384
  </div>
1154
- <ContentDivider type="dashed" margin='x-small' />
1155
- <Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
1385
+ <ContentDivider type="dashed" margin="x-small" />
1386
+ <Text size="small" className="mb-1 mt-0-5">
1387
+ <strong>This is a recurring event</strong>. Update all recurring events or just this
1388
+ one?
1389
+ </Text>
1156
1390
  <Select
1157
1391
  value={this.state.value}
1158
- label='Update:'
1392
+ label="Update:"
1159
1393
  required={false}
1160
1394
  disabled={false}
1161
1395
  inlineLabel={true}
@@ -1163,7 +1397,7 @@ export class TestGround extends React.Component<IProps, IState> {
1163
1397
  onChange={(value) => {
1164
1398
  this.setState({
1165
1399
  value: value,
1166
- })
1400
+ });
1167
1401
  }}
1168
1402
  >
1169
1403
  <Option>This event only</Option>
@@ -1176,36 +1410,49 @@ export class TestGround extends React.Component<IProps, IState> {
1176
1410
  <Modal
1177
1411
  headerTemplate="Save Event"
1178
1412
  visible={this.state.modalSaveEvent2}
1179
- contentPadding='medium'
1180
- contentBg='medium'
1181
- size='medium'
1413
+ contentPadding="medium"
1414
+ contentBg="medium"
1415
+ size="medium"
1182
1416
  footerTemplate={modalSaveEventFooterTwo}
1183
- onHide={() => {this.setState({modalSaveEvent2: false})}}
1417
+ onHide={() => {
1418
+ this.setState({modalSaveEvent2: false});
1419
+ }}
1184
1420
  >
1185
1421
  <div>
1186
- <FormLabel text='Name'/>
1187
- <Text size='small' weight='medium'>Australian Open 2024</Text>
1422
+ <FormLabel text="Name" />
1423
+ <Text size="small" weight="medium">
1424
+ Australian Open 2024
1425
+ </Text>
1188
1426
  </div>
1189
- <ContentDivider type="dashed" margin='x-small' />
1427
+ <ContentDivider type="dashed" margin="x-small" />
1190
1428
  <div>
1191
- <FormLabel text='Current Date'/>
1192
- <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
1429
+ <FormLabel text="Current Date" />
1430
+ <Text size="small" weight="medium">
1431
+ 05.02.2024 @ 10:00
1432
+ </Text>
1193
1433
  </div>
1194
- <ContentDivider type="dashed" margin='x-small' />
1434
+ <ContentDivider type="dashed" margin="x-small" />
1195
1435
  <div>
1196
- <FormLabel text='Current Repeat Summary'/>
1197
- <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
1436
+ <FormLabel text="Current Repeat Summary" />
1437
+ <Text size="small" weight="medium">
1438
+ Every 1 day(s) until CET 28 Feb 2024
1439
+ </Text>
1198
1440
  </div>
1199
- <ContentDivider type="dashed" margin='x-small' />
1441
+ <ContentDivider type="dashed" margin="x-small" />
1200
1442
  <div>
1201
- <FormLabel text='No. of events'/>
1202
- <Text size='small' weight='medium'>1</Text>
1443
+ <FormLabel text="No. of events" />
1444
+ <Text size="small" weight="medium">
1445
+ 1
1446
+ </Text>
1203
1447
  </div>
1204
- <ContentDivider type="dashed" margin='x-small' />
1205
- <Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
1448
+ <ContentDivider type="dashed" margin="x-small" />
1449
+ <Text size="small" className="mb-1 mt-0-5">
1450
+ <strong>This is a recurring event</strong>. Update all recurring events or just this
1451
+ one?
1452
+ </Text>
1206
1453
  <Select
1207
1454
  value={this.state.valueS2}
1208
- label='Update:'
1455
+ label="Update:"
1209
1456
  required={false}
1210
1457
  disabled={false}
1211
1458
  inlineLabel={true}
@@ -1213,7 +1460,7 @@ export class TestGround extends React.Component<IProps, IState> {
1213
1460
  onChange={(value) => {
1214
1461
  this.setState({
1215
1462
  value: value,
1216
- })
1463
+ });
1217
1464
  }}
1218
1465
  >
1219
1466
  <Option>This event only</Option>
@@ -1221,12 +1468,14 @@ export class TestGround extends React.Component<IProps, IState> {
1221
1468
  <Option>All events</Option>
1222
1469
  </Select>
1223
1470
  <ContentDivider type="solid" margin="medium" />
1224
- <Heading type='h3' className='mb-1 sd-text--bold'>Related Planning(s)</Heading>
1225
- <Text size='small' className='mb-1'>
1226
- <strong>You made changes to a planning item that is a part of a recurring event</strong>.
1227
- Apply the changes to all recurring planning items or just this one?
1471
+ <Heading type="h3" className="mb-1 sd-text--bold">
1472
+ Related Planning(s)
1473
+ </Heading>
1474
+ <Text size="small" className="mb-1">
1475
+ <strong>You made changes to a planning item that is a part of a recurring event</strong>
1476
+ . Apply the changes to all recurring planning items or just this one?
1228
1477
  </Text>
1229
- <div className='sd-list-item-group--space-between-items'>
1478
+ <div className="sd-list-item-group--space-between-items">
1230
1479
  <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
1231
1480
  <div className="sd-list-item__border sd-list-item__border--locked"></div>
1232
1481
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
@@ -1234,16 +1483,15 @@ export class TestGround extends React.Component<IProps, IState> {
1234
1483
  <i role="presentation" className="icon-calendar icon--light-blue"></i>
1235
1484
  <span className="sd-list-item__slugline">Planning Slug</span>
1236
1485
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
1237
- <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
1486
+ <span className="sd-list-item__text-strong">
1487
+ Cras justo odio, dapibus ac facilisis in.
1488
+ </span>
1238
1489
  </span>
1239
1490
  </div>
1240
1491
  <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
1241
- <Label text='draft' style='translucent'/>
1492
+ <Label text="draft" style="translucent" />
1242
1493
  <span className="sd-margin-s--auto">
1243
- <AvatarGroup
1244
- size="x-small"
1245
- items={avatars}
1246
- />
1494
+ <AvatarGroup size="x-small" items={avatars} />
1247
1495
  </span>
1248
1496
  </div>
1249
1497
  </div>
@@ -1252,7 +1500,7 @@ export class TestGround extends React.Component<IProps, IState> {
1252
1500
 
1253
1501
  <Select
1254
1502
  value={this.state.valueS2}
1255
- label='Update:'
1503
+ label="Update:"
1256
1504
  required={false}
1257
1505
  disabled={false}
1258
1506
  inlineLabel={true}
@@ -1260,32 +1508,35 @@ export class TestGround extends React.Component<IProps, IState> {
1260
1508
  onChange={(valueS2) => {
1261
1509
  this.setState({
1262
1510
  value: valueS2,
1263
- })
1511
+ });
1264
1512
  }}
1265
1513
  >
1266
1514
  <Option>This planning only</Option>
1267
1515
  <Option>This and all future plannings</Option>
1268
1516
  <Option>All plannings</Option>
1269
1517
  </Select>
1270
-
1271
1518
  </Modal>
1272
1519
 
1273
1520
  {/* Planning only */}
1274
1521
  <Modal
1275
1522
  headerTemplate="Save Event"
1276
1523
  visible={this.state.modalSaveEvent3}
1277
- contentPadding='medium'
1278
- contentBg='medium'
1279
- size='medium'
1524
+ contentPadding="medium"
1525
+ contentBg="medium"
1526
+ size="medium"
1280
1527
  footerTemplate={modalSaveEventFooterThree}
1281
- onHide={() => {this.setState({modalSaveEvent3: false})}}
1528
+ onHide={() => {
1529
+ this.setState({modalSaveEvent3: false});
1530
+ }}
1282
1531
  >
1283
- <Heading type='h3' className='mb-1 sd-text--bold'>Related Planning(s)</Heading>
1284
- <Text size='small' className='mb-1'>
1285
- <strong>You made changes to a planning item that is a part of a recurring event</strong>.
1286
- Apply the changes to all recurring planning items or just this one?
1532
+ <Heading type="h3" className="mb-1 sd-text--bold">
1533
+ Related Planning(s)
1534
+ </Heading>
1535
+ <Text size="small" className="mb-1">
1536
+ <strong>You made changes to a planning item that is a part of a recurring event</strong>
1537
+ . Apply the changes to all recurring planning items or just this one?
1287
1538
  </Text>
1288
- <div className='sd-list-item-group--space-between-items'>
1539
+ <div className="sd-list-item-group--space-between-items">
1289
1540
  <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
1290
1541
  <div className="sd-list-item__border sd-list-item__border--locked"></div>
1291
1542
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
@@ -1293,16 +1544,15 @@ export class TestGround extends React.Component<IProps, IState> {
1293
1544
  <i role="presentation" className="icon-calendar icon--light-blue"></i>
1294
1545
  <span className="sd-list-item__slugline">Planning Slug</span>
1295
1546
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
1296
- <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
1547
+ <span className="sd-list-item__text-strong">
1548
+ Cras justo odio, dapibus ac facilisis in.
1549
+ </span>
1297
1550
  </span>
1298
1551
  </div>
1299
1552
  <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
1300
- <Label text='draft' style='translucent'/>
1553
+ <Label text="draft" style="translucent" />
1301
1554
  <span className="sd-margin-s--auto">
1302
- <AvatarGroup
1303
- size="x-small"
1304
- items={avatars}
1305
- />
1555
+ <AvatarGroup size="x-small" items={avatars} />
1306
1556
  </span>
1307
1557
  </div>
1308
1558
  </div>
@@ -1311,7 +1561,7 @@ export class TestGround extends React.Component<IProps, IState> {
1311
1561
 
1312
1562
  <Select
1313
1563
  value={this.state.valueS2}
1314
- label='Update:'
1564
+ label="Update:"
1315
1565
  required={false}
1316
1566
  disabled={false}
1317
1567
  inlineLabel={true}
@@ -1319,7 +1569,7 @@ export class TestGround extends React.Component<IProps, IState> {
1319
1569
  onChange={(valueS2) => {
1320
1570
  this.setState({
1321
1571
  value: valueS2,
1322
- })
1572
+ });
1323
1573
  }}
1324
1574
  >
1325
1575
  <Option>This planning only</Option>
@@ -1327,14 +1577,14 @@ export class TestGround extends React.Component<IProps, IState> {
1327
1577
  <Option>All plannings</Option>
1328
1578
  </Select>
1329
1579
 
1330
- <ContentDivider type="dashed" margin='small' />
1580
+ <ContentDivider type="dashed" margin="small" />
1331
1581
 
1332
- <Text size='small' className='mb-1'>
1333
- <strong>You made changes to a planning item that is a part of a recurring event</strong>.
1334
- Apply the changes to all recurring planning items or just this one?
1582
+ <Text size="small" className="mb-1">
1583
+ <strong>You made changes to a planning item that is a part of a recurring event</strong>
1584
+ . Apply the changes to all recurring planning items or just this one?
1335
1585
  </Text>
1336
1586
 
1337
- <div className='sd-list-item-group--space-between-items'>
1587
+ <div className="sd-list-item-group--space-between-items">
1338
1588
  <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
1339
1589
  <div className="sd-list-item__border sd-list-item__border--locked"></div>
1340
1590
  <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
@@ -1342,16 +1592,15 @@ export class TestGround extends React.Component<IProps, IState> {
1342
1592
  <i role="presentation" className="icon-calendar icon--light-blue"></i>
1343
1593
  <span className="sd-list-item__slugline">Planning Slug</span>
1344
1594
  <span className="sd-overflow-ellipsis sd-list-item--element-grow">
1345
- <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
1595
+ <span className="sd-list-item__text-strong">
1596
+ Cras justo odio, dapibus ac facilisis in.
1597
+ </span>
1346
1598
  </span>
1347
1599
  </div>
1348
1600
  <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
1349
- <Label text='draft' style='translucent'/>
1601
+ <Label text="draft" style="translucent" />
1350
1602
  <span className="sd-margin-s--auto">
1351
- <AvatarGroup
1352
- size="small"
1353
- items={avatars}
1354
- />
1603
+ <AvatarGroup size="small" items={avatars} />
1355
1604
  </span>
1356
1605
  </div>
1357
1606
  </div>
@@ -1360,7 +1609,7 @@ export class TestGround extends React.Component<IProps, IState> {
1360
1609
 
1361
1610
  <Select
1362
1611
  value={this.state.valueS2}
1363
- label='Update:'
1612
+ label="Update:"
1364
1613
  required={false}
1365
1614
  disabled={false}
1366
1615
  inlineLabel={true}
@@ -1368,31 +1617,33 @@ export class TestGround extends React.Component<IProps, IState> {
1368
1617
  onChange={(valueS3) => {
1369
1618
  this.setState({
1370
1619
  value: valueS3,
1371
- })
1620
+ });
1372
1621
  }}
1373
1622
  >
1374
1623
  <Option>This planning only</Option>
1375
1624
  <Option>This and all future plannings</Option>
1376
1625
  <Option>All plannings</Option>
1377
1626
  </Select>
1378
-
1379
1627
  </Modal>
1380
1628
 
1381
1629
  {/* Planning templates modal */}
1382
- <Modal headerTemplate="Planning templates"
1630
+ <Modal
1631
+ headerTemplate="Planning templates"
1383
1632
  visible={this.state.modalPlanningTemplates}
1384
- contentPadding='medium'
1385
- contentBg='medium'
1386
- size='medium'
1387
- onHide={() => {this.setState({modalPlanningTemplates: false})}}
1633
+ contentPadding="medium"
1634
+ contentBg="medium"
1635
+ size="medium"
1636
+ onHide={() => {
1637
+ this.setState({modalPlanningTemplates: false});
1638
+ }}
1388
1639
  >
1389
- <div className='modal__sticky-header'>
1390
- <SearchBar placeholder='Search templates' boxed={true}>
1640
+ <div className="modal__sticky-header">
1641
+ <SearchBar placeholder="Search templates" boxed={true}>
1391
1642
  <Dropdown
1392
1643
  items={[
1393
- { label: 'Features', onSelect: () => 1 },
1394
- { label: 'Sports', onSelect: () => 1 },
1395
- { label: 'Entertainment', onSelect: () => 1 },
1644
+ {label: 'Features', onSelect: () => 1},
1645
+ {label: 'Sports', onSelect: () => 1},
1646
+ {label: 'Entertainment', onSelect: () => 1},
1396
1647
  ]}
1397
1648
  >
1398
1649
  All Calendars
@@ -1400,36 +1651,43 @@ export class TestGround extends React.Component<IProps, IState> {
1400
1651
  </SearchBar>
1401
1652
  </div>
1402
1653
 
1403
- <Heading type='h6' className='mt-1 mb-1'>Features</Heading>
1654
+ <Heading type="h6" className="mt-1 mb-1">
1655
+ Features
1656
+ </Heading>
1404
1657
  <BoxedList>
1405
1658
  <BoxedListItem clickable={true}>Features -- template one cras fringilla</BoxedListItem>
1406
1659
  <BoxedListItem clickable={true}>Features -- template two sit quam</BoxedListItem>
1407
- <BoxedListItem clickable={true}>Features -- template fermentum quam venenatis</BoxedListItem>
1660
+ <BoxedListItem clickable={true}>
1661
+ Features -- template fermentum quam venenatis
1662
+ </BoxedListItem>
1408
1663
  <BoxedListItem clickable={true}>Features -- template dapibus mattis</BoxedListItem>
1409
1664
  </BoxedList>
1410
- <Heading type='h6' className='mt-2 mb-1'>Sports</Heading>
1665
+ <Heading type="h6" className="mt-2 mb-1">
1666
+ Sports
1667
+ </Heading>
1411
1668
  <BoxedList>
1412
- <BoxedListItem clickable={true}>Sports -- template one fermentum venenatis</BoxedListItem>
1669
+ <BoxedListItem clickable={true}>
1670
+ Sports -- template one fermentum venenatis
1671
+ </BoxedListItem>
1413
1672
  <BoxedListItem clickable={true}>Sports -- template two cras condimentum</BoxedListItem>
1414
1673
  <BoxedListItem clickable={true}>Sports -- template bibendum commodo nibh</BoxedListItem>
1415
1674
  </BoxedList>
1416
-
1417
1675
  </Modal>
1418
1676
 
1419
1677
  <h3 className="docs-page__h3 ">Planning Templates</h3>
1420
- <SearchBar placeholder='Search' boxed={true}>
1678
+ <SearchBar placeholder="Search" boxed={true}>
1421
1679
  <Dropdown
1422
1680
  items={[
1423
- { label: 'Action 1', onSelect: () => 1 },
1424
- { label: 'Action 2', onSelect: () => 1 },
1425
- { label: 'Action 3', onSelect: () => 1 },
1681
+ {label: 'Action 1', onSelect: () => 1},
1682
+ {label: 'Action 2', onSelect: () => 1},
1683
+ {label: 'Action 3', onSelect: () => 1},
1426
1684
  ]}
1427
1685
  >
1428
1686
  With dropdown
1429
1687
  </Dropdown>
1430
1688
  </SearchBar>
1431
1689
  <hr />
1432
- <SearchBar placeholder='Search' boxed={true}>
1690
+ <SearchBar placeholder="Search" boxed={true}>
1433
1691
  <TreeSelect
1434
1692
  kind={'synchronous'}
1435
1693
  value={this.state.treeSelectValue}
@@ -1437,8 +1695,8 @@ export class TestGround extends React.Component<IProps, IState> {
1437
1695
  getLabel={(item) => item.name}
1438
1696
  getId={(item) => item.name}
1439
1697
  onChange={() => false}
1440
- placeholder='Select a desk'
1441
- width='medium'
1698
+ placeholder="Select a desk"
1699
+ width="medium"
1442
1700
  inlineLabel
1443
1701
  labelHidden
1444
1702
  >
@@ -1450,37 +1708,41 @@ export class TestGround extends React.Component<IProps, IState> {
1450
1708
  <hr />
1451
1709
 
1452
1710
  <h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
1453
- <div className='sd-pagination'>
1454
- <button className='sd-pagination__item sd-pagination__item--start' disabled>
1455
- <Icon name='backward-thin' />
1711
+ <div className="sd-pagination">
1712
+ <button className="sd-pagination__item sd-pagination__item--start" disabled>
1713
+ <Icon name="backward-thin" />
1456
1714
  </button>
1457
- <button className='sd-pagination__item sd-pagination__item--back' disabled>
1458
- <Icon name='chevron-left-thin' />
1715
+ <button className="sd-pagination__item sd-pagination__item--back" disabled>
1716
+ <Icon name="chevron-left-thin" />
1459
1717
  </button>
1460
- <button className='sd-pagination__item'>1</button>
1461
- <button className='sd-pagination__item sd-pagination__item--active'>2</button>
1462
- <button className='sd-pagination__item'>3</button>
1463
- <button className='sd-pagination__item'>4</button>
1464
- <span className='sd-pagination__item sd-pagination__item--more'>...</span>
1465
- <button className='sd-pagination__item'>12</button>
1466
- <button className='sd-pagination__item sd-pagination__item--forward'>
1467
- <Icon name='chevron-right-thin' />
1718
+ <button className="sd-pagination__item">1</button>
1719
+ <button className="sd-pagination__item sd-pagination__item--active">2</button>
1720
+ <button className="sd-pagination__item">3</button>
1721
+ <button className="sd-pagination__item">4</button>
1722
+ <span className="sd-pagination__item sd-pagination__item--more">...</span>
1723
+ <button className="sd-pagination__item">12</button>
1724
+ <button className="sd-pagination__item sd-pagination__item--forward">
1725
+ <Icon name="chevron-right-thin" />
1468
1726
  </button>
1469
- <button className='sd-pagination__item sd-pagination__item--end'>
1470
- <Icon name='forward-thin' />
1727
+ <button className="sd-pagination__item sd-pagination__item--end">
1728
+ <Icon name="forward-thin" />
1471
1729
  </button>
1472
1730
  </div>
1473
1731
 
1474
1732
  <hr />
1475
1733
 
1476
- <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus my-5'>
1477
- <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
1478
- <Text color='light'>
1734
+ <Container
1735
+ gap="large"
1736
+ direction="column"
1737
+ className="sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus my-5"
1738
+ >
1739
+ <Heading type="h3">Curabitur blandit tempus porttitor.</Heading>
1740
+ <Text color="light">
1479
1741
  Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
1480
1742
  </Text>
1481
1743
  <ButtonGroup align="end">
1482
- <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
1483
- <Button text="Submit" onClick={()=> false} type="primary" />
1744
+ <Button text="Cancel" onClick={() => false} type="default" style="hollow" />
1745
+ <Button text="Submit" onClick={() => false} type="primary" />
1484
1746
  </ButtonGroup>
1485
1747
  </Container>
1486
1748
 
@@ -1491,17 +1753,30 @@ export class TestGround extends React.Component<IProps, IState> {
1491
1753
  <img
1492
1754
  src="/path/toimage"
1493
1755
  alt="my image"
1494
- onError={({ currentTarget }) => {
1756
+ onError={({currentTarget}) => {
1495
1757
  currentTarget.onerror = null; // prevents looping
1496
- currentTarget.src="/illustration--playground.svg";
1497
- currentTarget.classList.add('broken-img')
1758
+ currentTarget.src = '/illustration--playground.svg';
1759
+ currentTarget.classList.add('broken-img');
1498
1760
  }}
1499
1761
  />
1500
1762
 
1501
1763
  <div className="input-wrap">
1502
- <FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
1503
- <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
1504
- <InputBase placeholder='Test placeholder' boxedStyle invalid type='text' id="input1" value='' onChange={() => false} />
1764
+ <FormLabel invalid required={true} state="focused" text="Form Label" forId="input1" />
1765
+ <IconButton
1766
+ size="small"
1767
+ icon="settings"
1768
+ ariaValue="Screen-reader text"
1769
+ onClick={() => false}
1770
+ />
1771
+ <InputBase
1772
+ placeholder="Test placeholder"
1773
+ boxedStyle
1774
+ invalid
1775
+ type="text"
1776
+ id="input1"
1777
+ value=""
1778
+ onChange={() => false}
1779
+ />
1505
1780
  <div className="input-wrap__message-box">
1506
1781
  <div className="sd-input__hint">Error message</div>
1507
1782
  </div>
@@ -1511,9 +1786,23 @@ export class TestGround extends React.Component<IProps, IState> {
1511
1786
  <hr />
1512
1787
 
1513
1788
  <div className="input-wrap input-wrap--boxed">
1514
- <FormLabel style='boxed' text="Form Label" required={true} forId="input2" />
1515
- <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
1516
- <InputBase disabled size='medium' placeholder='Test placeholder' boxedStyle type='text' id="input2" value='' onChange={() => false} />
1789
+ <FormLabel style="boxed" text="Form Label" required={true} forId="input2" />
1790
+ <IconButton
1791
+ size="small"
1792
+ icon="settings"
1793
+ ariaValue="Screen-reader text"
1794
+ onClick={() => false}
1795
+ />
1796
+ <InputBase
1797
+ disabled
1798
+ size="medium"
1799
+ placeholder="Test placeholder"
1800
+ boxedStyle
1801
+ type="text"
1802
+ id="input2"
1803
+ value=""
1804
+ onChange={() => false}
1805
+ />
1517
1806
  <div className="input-wrap__message-box">
1518
1807
  <div className="sd-input__hint">Error message</div>
1519
1808
  </div>
@@ -1523,34 +1812,35 @@ export class TestGround extends React.Component<IProps, IState> {
1523
1812
  <hr />
1524
1813
 
1525
1814
  <InputNew
1526
- label='test'
1527
- value=''
1815
+ label="test"
1816
+ value=""
1528
1817
  onChange={() => false}
1529
- placeholder='test'
1818
+ placeholder="test"
1530
1819
  required={true}
1531
- info='Nullam Sollicitudin'
1820
+ info="Nullam Sollicitudin"
1532
1821
  maxLength={20}
1533
1822
  inlineLabel={true}
1534
1823
  labelHidden={true}
1535
- type='text'
1824
+ type="text"
1536
1825
  />
1537
1826
 
1538
1827
  <hr />
1539
1828
 
1540
- <div className='form__group-new'>
1829
+ <div className="form__group-new">
1541
1830
  <Input
1542
- value=''
1831
+ value=""
1543
1832
  onChange={() => false}
1544
- type='text'
1545
- label='Text input'
1546
- placeholder='Enter text'
1833
+ type="text"
1834
+ label="Text input"
1835
+ placeholder="Enter text"
1547
1836
  disabled={true}
1548
1837
  />
1549
- <Input value=''
1838
+ <Input
1839
+ value=""
1550
1840
  onChange={() => false}
1551
- type='text'
1552
- label='Text input'
1553
- placeholder='Enter text'
1841
+ type="text"
1842
+ label="Text input"
1843
+ placeholder="Enter text"
1554
1844
  disabled={true}
1555
1845
  />
1556
1846
  <DatePicker
@@ -1558,7 +1848,7 @@ export class TestGround extends React.Component<IProps, IState> {
1558
1848
  dateFormat="YYYY-MM-DD"
1559
1849
  disabled={true}
1560
1850
  required={true}
1561
- label='Date'
1851
+ label="Date"
1562
1852
  onChange={(date) => {
1563
1853
  this.setState({date});
1564
1854
  }}
@@ -1567,65 +1857,69 @@ export class TestGround extends React.Component<IProps, IState> {
1567
1857
  value={this.state.time}
1568
1858
  disabled={true}
1569
1859
  required={true}
1570
- label='Time'
1860
+ label="Time"
1571
1861
  onChange={(time) => {
1572
1862
  this.setState({time});
1573
1863
  }}
1574
1864
  />
1575
- <Button text="Clear" onClick={()=> false} />
1576
- <Button text="Cancel" onClick={()=> false} />
1577
- <Button text="Save" type='primary' onClick={()=> false} />
1865
+ <Button text="Clear" onClick={() => false} />
1866
+ <Button text="Cancel" onClick={() => false} />
1867
+ <Button text="Save" type="primary" onClick={() => false} />
1578
1868
  </div>
1579
1869
 
1580
1870
  <hr />
1581
1871
 
1582
- <FormRowNew rowLabel='My group label' inlineLabels={true}>
1872
+ <FormRowNew rowLabel="My group label" inlineLabels={true}>
1583
1873
  <Input
1584
- value=''
1874
+ value=""
1585
1875
  onChange={() => false}
1586
- type='text'
1587
- label='Text input'
1588
- placeholder='Enter text'
1876
+ type="text"
1877
+ label="Text input"
1878
+ placeholder="Enter text"
1589
1879
  inlineLabel={true}
1590
1880
  labelHidden={true}
1591
1881
  disabled={false}
1592
1882
  />
1593
- <Text size='small' align='center'>To:</Text>
1883
+ <Text size="small" align="center">
1884
+ To:
1885
+ </Text>
1594
1886
  <Input
1595
- value=''
1887
+ value=""
1596
1888
  onChange={() => false}
1597
- type='text'
1598
- label='Text input'
1599
- placeholder='Enter text'
1889
+ type="text"
1890
+ label="Text input"
1891
+ placeholder="Enter text"
1600
1892
  inlineLabel={true}
1601
1893
  labelHidden={true}
1602
1894
  disabled={false}
1603
1895
  />
1604
- <Button text="Save" type='primary' onClick={()=> false} />
1896
+ <Button text="Save" type="primary" onClick={() => false} />
1605
1897
  </FormRowNew>
1606
1898
 
1607
1899
  <hr />
1608
1900
 
1609
1901
  <FormRowNew>
1610
1902
  <Input
1611
- value=''
1903
+ value=""
1612
1904
  onChange={() => false}
1613
- type='text'
1614
- label='Text input'
1615
- placeholder='Enter text'
1905
+ type="text"
1906
+ label="Text input"
1907
+ placeholder="Enter text"
1616
1908
  disabled={false}
1617
1909
  />
1618
- <Text size='small' align='center'>To:</Text>
1910
+ <Text size="small" align="center">
1911
+ To:
1912
+ </Text>
1619
1913
  <Input
1620
- value=''
1914
+ value=""
1621
1915
  onChange={() => false}
1622
- type='text'
1623
- label='Text input'
1624
- placeholder='Enter text'
1916
+ type="text"
1917
+ label="Text input"
1918
+ placeholder="Enter text"
1625
1919
  labelHidden={true}
1626
1920
  disabled={false}
1627
1921
  />
1628
- <Button text="Save" type='primary' onClick={()=> false} />
1922
+ <Button text="Save" type="primary" onClick={() => false} />
1629
1923
  </FormRowNew>
1630
1924
 
1631
1925
  <hr />
@@ -1635,77 +1929,126 @@ export class TestGround extends React.Component<IProps, IState> {
1635
1929
  <hr />
1636
1930
 
1637
1931
  <h4 className="docs-page__h4 sd-margin-y--1">Handles visible</h4>
1638
- <ul className='table-list table-list--gap-s'>
1639
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
1640
- <div className='table-list__item-border'></div>
1641
- <div className='table-list__item-content'>
1642
- <div className='table-list__item-content-block'>
1643
- <Label text='Uvod' />
1644
- <Label type='primary' text='prlg' />
1645
- </div>
1646
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1647
- <span>Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
1648
- </div>
1649
- <div className='table-list__item-content-block'>
1650
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
1932
+ <ul className="table-list table-list--gap-s">
1933
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always">
1934
+ <div className="table-list__item-border"></div>
1935
+ <div className="table-list__item-content">
1936
+ <div className="table-list__item-content-block">
1937
+ <Label text="Uvod" />
1938
+ <Label type="primary" text="prlg" />
1939
+ </div>
1940
+ <div className="table-list__item-content-block table-list__item-content-block--center">
1941
+ <span>
1942
+ Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.
1943
+ </span>
1944
+ </div>
1945
+ <div className="table-list__item-content-block">
1946
+ <IconLabel
1947
+ style="translucent"
1948
+ text="Label success"
1949
+ type="success"
1950
+ icon="time"
1951
+ />
1651
1952
  </div>
1652
1953
  </div>
1653
- <div className='table-list__slide-in-actions'>
1654
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
1954
+ <div className="table-list__slide-in-actions">
1955
+ <IconButton
1956
+ icon="dots-vertical"
1957
+ size="small"
1958
+ ariaValue="More actions"
1959
+ onClick={() => false}
1960
+ />
1655
1961
  </div>
1656
1962
  </li>
1657
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
1658
- <div className='table-list__item-border'></div>
1659
- <div className='table-list__item-content'>
1660
- <div className='table-list__item-content-block'>
1661
- <Label text='Gost' />
1662
- <Label type='primary' text='prlg' />
1663
- </div>
1664
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1665
- <span>Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
1666
- </div>
1667
- <div className='table-list__item-content-block'>
1668
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
1963
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always">
1964
+ <div className="table-list__item-border"></div>
1965
+ <div className="table-list__item-content">
1966
+ <div className="table-list__item-content-block">
1967
+ <Label text="Gost" />
1968
+ <Label type="primary" text="prlg" />
1969
+ </div>
1970
+ <div className="table-list__item-content-block table-list__item-content-block--center">
1971
+ <span>
1972
+ Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor
1973
+ ligula..
1974
+ </span>
1975
+ </div>
1976
+ <div className="table-list__item-content-block">
1977
+ <IconLabel
1978
+ style="translucent"
1979
+ text="Label success"
1980
+ type="success"
1981
+ icon="time"
1982
+ />
1669
1983
  </div>
1670
1984
  </div>
1671
- <div className='table-list__slide-in-actions'>
1672
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
1985
+ <div className="table-list__slide-in-actions">
1986
+ <IconButton
1987
+ icon="dots-vertical"
1988
+ size="small"
1989
+ ariaValue="More actions"
1990
+ onClick={() => false}
1991
+ />
1673
1992
  </div>
1674
1993
  </li>
1675
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always'>
1676
- <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
1677
- <div className='table-list__item-content'>
1678
- <div className='table-list__item-content-block'>
1679
- <Label text='Podatak' />
1680
- <Label type='primary' text='Gost' />
1681
- </div>
1682
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1683
- <span>Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
1684
- </div>
1685
- <div className='table-list__item-content-block'>
1686
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
1994
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always">
1995
+ <div style={{background: '#83cf7e'}} className="table-list__item-border"></div>
1996
+ <div className="table-list__item-content">
1997
+ <div className="table-list__item-content-block">
1998
+ <Label text="Podatak" />
1999
+ <Label type="primary" text="Gost" />
2000
+ </div>
2001
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2002
+ <span>
2003
+ Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.
2004
+ </span>
2005
+ </div>
2006
+ <div className="table-list__item-content-block">
2007
+ <IconLabel
2008
+ style="translucent"
2009
+ text="Label success"
2010
+ type="success"
2011
+ icon="time"
2012
+ />
1687
2013
  </div>
1688
2014
  </div>
1689
- <div className='table-list__slide-in-actions'>
1690
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2015
+ <div className="table-list__slide-in-actions">
2016
+ <IconButton
2017
+ icon="dots-vertical"
2018
+ size="small"
2019
+ ariaValue="More actions"
2020
+ onClick={() => false}
2021
+ />
1691
2022
  </div>
1692
2023
  </li>
1693
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected'>
1694
- <div className='table-list__item-border'></div>
1695
- <div className='table-list__item-content'>
1696
- <div className='table-list__item-content-block'>
1697
- <Label text='Odjava' />
1698
- <Label type='warning' text='Slika' />
1699
- </div>
1700
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1701
- <span>Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
1702
- </div>
1703
- <div className='table-list__item-content-block'>
1704
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2024
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected">
2025
+ <div className="table-list__item-border"></div>
2026
+ <div className="table-list__item-content">
2027
+ <div className="table-list__item-content-block">
2028
+ <Label text="Odjava" />
2029
+ <Label type="warning" text="Slika" />
2030
+ </div>
2031
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2032
+ <span>
2033
+ Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.
2034
+ </span>
2035
+ </div>
2036
+ <div className="table-list__item-content-block">
2037
+ <IconLabel
2038
+ style="translucent"
2039
+ text="Label success"
2040
+ type="success"
2041
+ icon="time"
2042
+ />
1705
2043
  </div>
1706
2044
  </div>
1707
- <div className='table-list__slide-in-actions'>
1708
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2045
+ <div className="table-list__slide-in-actions">
2046
+ <IconButton
2047
+ icon="dots-vertical"
2048
+ size="small"
2049
+ ariaValue="More actions"
2050
+ onClick={() => false}
2051
+ />
1709
2052
  </div>
1710
2053
  </li>
1711
2054
  </ul>
@@ -1713,77 +2056,126 @@ export class TestGround extends React.Component<IProps, IState> {
1713
2056
  <hr />
1714
2057
 
1715
2058
  <h4 className="docs-page__h4 sd-margin-y--1">Handles hidden</h4>
1716
- <ul className='table-list table-list--gap-s'>
1717
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
1718
- <div className='table-list__item-border'></div>
1719
- <div className='table-list__item-content'>
1720
- <div className='table-list__item-content-block'>
1721
- <Label text='Uvod' />
1722
- <Label type='primary' text='prlg' />
1723
- </div>
1724
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1725
- <span>Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
1726
- </div>
1727
- <div className='table-list__item-content-block'>
1728
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2059
+ <ul className="table-list table-list--gap-s">
2060
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none">
2061
+ <div className="table-list__item-border"></div>
2062
+ <div className="table-list__item-content">
2063
+ <div className="table-list__item-content-block">
2064
+ <Label text="Uvod" />
2065
+ <Label type="primary" text="prlg" />
2066
+ </div>
2067
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2068
+ <span>
2069
+ Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.
2070
+ </span>
2071
+ </div>
2072
+ <div className="table-list__item-content-block">
2073
+ <IconLabel
2074
+ style="translucent"
2075
+ text="Label success"
2076
+ type="success"
2077
+ icon="time"
2078
+ />
1729
2079
  </div>
1730
2080
  </div>
1731
- <div className='table-list__slide-in-actions'>
1732
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2081
+ <div className="table-list__slide-in-actions">
2082
+ <IconButton
2083
+ icon="dots-vertical"
2084
+ size="small"
2085
+ ariaValue="More actions"
2086
+ onClick={() => false}
2087
+ />
1733
2088
  </div>
1734
2089
  </li>
1735
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
1736
- <div className='table-list__item-border'></div>
1737
- <div className='table-list__item-content'>
1738
- <div className='table-list__item-content-block'>
1739
- <Label text='Gost' />
1740
- <Label type='primary' text='prlg' />
1741
- </div>
1742
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1743
- <span>Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
1744
- </div>
1745
- <div className='table-list__item-content-block'>
1746
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2090
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none">
2091
+ <div className="table-list__item-border"></div>
2092
+ <div className="table-list__item-content">
2093
+ <div className="table-list__item-content-block">
2094
+ <Label text="Gost" />
2095
+ <Label type="primary" text="prlg" />
2096
+ </div>
2097
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2098
+ <span>
2099
+ Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor
2100
+ ligula..
2101
+ </span>
2102
+ </div>
2103
+ <div className="table-list__item-content-block">
2104
+ <IconLabel
2105
+ style="translucent"
2106
+ text="Label success"
2107
+ type="success"
2108
+ icon="time"
2109
+ />
1747
2110
  </div>
1748
2111
  </div>
1749
- <div className='table-list__slide-in-actions'>
1750
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2112
+ <div className="table-list__slide-in-actions">
2113
+ <IconButton
2114
+ icon="dots-vertical"
2115
+ size="small"
2116
+ ariaValue="More actions"
2117
+ onClick={() => false}
2118
+ />
1751
2119
  </div>
1752
2120
  </li>
1753
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none'>
1754
- <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
1755
- <div className='table-list__item-content'>
1756
- <div className='table-list__item-content-block'>
1757
- <Label text='Podatak' />
1758
- <Label type='primary' text='Gost' />
1759
- </div>
1760
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1761
- <span>Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
1762
- </div>
1763
- <div className='table-list__item-content-block'>
1764
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2121
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none">
2122
+ <div style={{background: '#83cf7e'}} className="table-list__item-border"></div>
2123
+ <div className="table-list__item-content">
2124
+ <div className="table-list__item-content-block">
2125
+ <Label text="Podatak" />
2126
+ <Label type="primary" text="Gost" />
2127
+ </div>
2128
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2129
+ <span>
2130
+ Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.
2131
+ </span>
2132
+ </div>
2133
+ <div className="table-list__item-content-block">
2134
+ <IconLabel
2135
+ style="translucent"
2136
+ text="Label success"
2137
+ type="success"
2138
+ icon="time"
2139
+ />
1765
2140
  </div>
1766
2141
  </div>
1767
- <div className='table-list__slide-in-actions'>
1768
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2142
+ <div className="table-list__slide-in-actions">
2143
+ <IconButton
2144
+ icon="dots-vertical"
2145
+ size="small"
2146
+ ariaValue="More actions"
2147
+ onClick={() => false}
2148
+ />
1769
2149
  </div>
1770
2150
  </li>
1771
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected'>
1772
- <div className='table-list__item-border'></div>
1773
- <div className='table-list__item-content'>
1774
- <div className='table-list__item-content-block'>
1775
- <Label text='Odjava' />
1776
- <Label type='warning' text='Slika' />
1777
- </div>
1778
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1779
- <span>Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
1780
- </div>
1781
- <div className='table-list__item-content-block'>
1782
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2151
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected">
2152
+ <div className="table-list__item-border"></div>
2153
+ <div className="table-list__item-content">
2154
+ <div className="table-list__item-content-block">
2155
+ <Label text="Odjava" />
2156
+ <Label type="warning" text="Slika" />
2157
+ </div>
2158
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2159
+ <span>
2160
+ Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.
2161
+ </span>
2162
+ </div>
2163
+ <div className="table-list__item-content-block">
2164
+ <IconLabel
2165
+ style="translucent"
2166
+ text="Label success"
2167
+ type="success"
2168
+ icon="time"
2169
+ />
1783
2170
  </div>
1784
2171
  </div>
1785
- <div className='table-list__slide-in-actions'>
1786
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2172
+ <div className="table-list__slide-in-actions">
2173
+ <IconButton
2174
+ icon="dots-vertical"
2175
+ size="small"
2176
+ ariaValue="More actions"
2177
+ onClick={() => false}
2178
+ />
1787
2179
  </div>
1788
2180
  </li>
1789
2181
  </ul>
@@ -1791,77 +2183,126 @@ export class TestGround extends React.Component<IProps, IState> {
1791
2183
  <hr />
1792
2184
 
1793
2185
  <h4 className="docs-page__h4 sd-margin-y--1">Handles on hover</h4>
1794
- <ul className='table-list table-list--gap-s'>
1795
- <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
1796
- <div className='table-list__item-border'></div>
1797
- <div className='table-list__item-content'>
1798
- <div className='table-list__item-content-block'>
1799
- <Label text='Uvod' />
1800
- <Label type='primary' text='prlg' />
1801
- </div>
1802
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1803
- <span>Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
1804
- </div>
1805
- <div className='table-list__item-content-block'>
1806
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2186
+ <ul className="table-list table-list--gap-s">
2187
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable">
2188
+ <div className="table-list__item-border"></div>
2189
+ <div className="table-list__item-content">
2190
+ <div className="table-list__item-content-block">
2191
+ <Label text="Uvod" />
2192
+ <Label type="primary" text="prlg" />
2193
+ </div>
2194
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2195
+ <span>
2196
+ Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.
2197
+ </span>
2198
+ </div>
2199
+ <div className="table-list__item-content-block">
2200
+ <IconLabel
2201
+ style="translucent"
2202
+ text="Label success"
2203
+ type="success"
2204
+ icon="time"
2205
+ />
1807
2206
  </div>
1808
2207
  </div>
1809
- <div className='table-list__slide-in-actions'>
1810
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2208
+ <div className="table-list__slide-in-actions">
2209
+ <IconButton
2210
+ icon="dots-vertical"
2211
+ size="small"
2212
+ ariaValue="More actions"
2213
+ onClick={() => false}
2214
+ />
1811
2215
  </div>
1812
2216
  </li>
1813
- <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
1814
- <div className='table-list__item-border'></div>
1815
- <div className='table-list__item-content'>
1816
- <div className='table-list__item-content-block'>
1817
- <Label text='Gost' />
1818
- <Label type='primary' text='prlg' />
1819
- </div>
1820
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1821
- <span>Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..</span>
1822
- </div>
1823
- <div className='table-list__item-content-block'>
1824
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2217
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable">
2218
+ <div className="table-list__item-border"></div>
2219
+ <div className="table-list__item-content">
2220
+ <div className="table-list__item-content-block">
2221
+ <Label text="Gost" />
2222
+ <Label type="primary" text="prlg" />
2223
+ </div>
2224
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2225
+ <span>
2226
+ Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor
2227
+ ligula..
2228
+ </span>
2229
+ </div>
2230
+ <div className="table-list__item-content-block">
2231
+ <IconLabel
2232
+ style="translucent"
2233
+ text="Label success"
2234
+ type="success"
2235
+ icon="time"
2236
+ />
1825
2237
  </div>
1826
2238
  </div>
1827
- <div className='table-list__slide-in-actions'>
1828
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2239
+ <div className="table-list__slide-in-actions">
2240
+ <IconButton
2241
+ icon="dots-vertical"
2242
+ size="small"
2243
+ ariaValue="More actions"
2244
+ onClick={() => false}
2245
+ />
1829
2246
  </div>
1830
2247
  </li>
1831
- <li className='table-list__item table-list__item--clickable table-list__item--draggable'>
1832
- <div style={{background:'#83cf7e',}} className='table-list__item-border'></div>
1833
- <div className='table-list__item-content'>
1834
- <div className='table-list__item-content-block'>
1835
- <Label text='Podatak' />
1836
- <Label type='primary' text='Gost' />
1837
- </div>
1838
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1839
- <span>Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.</span>
1840
- </div>
1841
- <div className='table-list__item-content-block'>
1842
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2248
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable">
2249
+ <div style={{background: '#83cf7e'}} className="table-list__item-border"></div>
2250
+ <div className="table-list__item-content">
2251
+ <div className="table-list__item-content-block">
2252
+ <Label text="Podatak" />
2253
+ <Label type="primary" text="Gost" />
2254
+ </div>
2255
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2256
+ <span>
2257
+ Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.
2258
+ </span>
2259
+ </div>
2260
+ <div className="table-list__item-content-block">
2261
+ <IconLabel
2262
+ style="translucent"
2263
+ text="Label success"
2264
+ type="success"
2265
+ icon="time"
2266
+ />
1843
2267
  </div>
1844
2268
  </div>
1845
- <div className='table-list__slide-in-actions'>
1846
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2269
+ <div className="table-list__slide-in-actions">
2270
+ <IconButton
2271
+ icon="dots-vertical"
2272
+ size="small"
2273
+ ariaValue="More actions"
2274
+ onClick={() => false}
2275
+ />
1847
2276
  </div>
1848
2277
  </li>
1849
- <li className='table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected'>
1850
- <div className='table-list__item-border'></div>
1851
- <div className='table-list__item-content'>
1852
- <div className='table-list__item-content-block'>
1853
- <Label text='Odjava' />
1854
- <Label type='warning' text='Slika' />
1855
- </div>
1856
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1857
- <span>Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
1858
- </div>
1859
- <div className='table-list__item-content-block'>
1860
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2278
+ <li className="table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected">
2279
+ <div className="table-list__item-border"></div>
2280
+ <div className="table-list__item-content">
2281
+ <div className="table-list__item-content-block">
2282
+ <Label text="Odjava" />
2283
+ <Label type="warning" text="Slika" />
2284
+ </div>
2285
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2286
+ <span>
2287
+ Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.
2288
+ </span>
2289
+ </div>
2290
+ <div className="table-list__item-content-block">
2291
+ <IconLabel
2292
+ style="translucent"
2293
+ text="Label success"
2294
+ type="success"
2295
+ icon="time"
2296
+ />
1861
2297
  </div>
1862
2298
  </div>
1863
- <div className='table-list__slide-in-actions'>
1864
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2299
+ <div className="table-list__slide-in-actions">
2300
+ <IconButton
2301
+ icon="dots-vertical"
2302
+ size="small"
2303
+ ariaValue="More actions"
2304
+ onClick={() => false}
2305
+ />
1865
2306
  </div>
1866
2307
  </li>
1867
2308
  </ul>
@@ -1872,87 +2313,149 @@ export class TestGround extends React.Component<IProps, IState> {
1872
2313
 
1873
2314
  <hr />
1874
2315
 
1875
- <ul className='table-list table-list--contained'>
1876
- <li className='table-list__item-container'>
1877
- <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
1878
- <div className='table-list__item-content'>
1879
- <div className='table-list__item-content-block'>
1880
- <Label style='translucent' text='aacc' />
1881
- <Label style='translucent' type='primary' text='prlg' />
2316
+ <ul className="table-list table-list--contained">
2317
+ <li className="table-list__item-container">
2318
+ <div className="table-list__item table-list__item--clickable table-list__item--draggable">
2319
+ <div className="table-list__item-content">
2320
+ <div className="table-list__item-content-block">
2321
+ <Label style="translucent" text="aacc" />
2322
+ <Label style="translucent" type="primary" text="prlg" />
1882
2323
  </div>
1883
- <div className='table-list__item-content-block table-list__item-content-block--center'>
1884
- <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
2324
+ <div className="table-list__item-content-block table-list__item-content-block--center">
2325
+ <span>
2326
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
2327
+ lacinia odio sem nec elit.
2328
+ </span>
1885
2329
  </div>
1886
- <div className='table-list__item-content-block'>
1887
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2330
+ <div className="table-list__item-content-block">
2331
+ <IconLabel
2332
+ style="translucent"
2333
+ text="Label success"
2334
+ type="success"
2335
+ icon="time"
2336
+ />
1888
2337
  </div>
1889
2338
  </div>
1890
- <div className='table-list__slide-in-actions'>
1891
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2339
+ <div className="table-list__slide-in-actions">
2340
+ <IconButton
2341
+ icon="dots-vertical"
2342
+ size="small"
2343
+ ariaValue="More actions"
2344
+ onClick={() => false}
2345
+ />
1892
2346
  </div>
1893
2347
  </div>
1894
2348
 
1895
- <div className='table-list__add-bar-container'>
1896
- <Tooltip text='Add item' flow='top'>
1897
- <div className='table-list__add-bar'>
1898
- <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
2349
+ <div className="table-list__add-bar-container">
2350
+ <Tooltip text="Add item" flow="top">
2351
+ <div className="table-list__add-bar">
2352
+ <Button
2353
+ type="primary"
2354
+ icon="plus-large"
2355
+ text="Add item"
2356
+ size="small"
2357
+ shape="round"
2358
+ iconOnly={true}
2359
+ onClick={() => false}
2360
+ />
1899
2361
  </div>
1900
2362
  </Tooltip>
1901
2363
  </div>
1902
2364
  </li>
1903
2365
 
1904
- <li className='table-list__item-container'>
1905
- <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
1906
- <div className='table-list__item-content'>
1907
- <div className='table-list__item-content-block'>
1908
- <Label style='translucent' type='warning' text='pokr' />
1909
- <Label style='translucent' text='slika' />
2366
+ <li className="table-list__item-container">
2367
+ <div className="table-list__item table-list__item--clickable table-list__item--draggable">
2368
+ <div className="table-list__item-content">
2369
+ <div className="table-list__item-content-block">
2370
+ <Label style="translucent" type="warning" text="pokr" />
2371
+ <Label style="translucent" text="slika" />
1910
2372
  </div>
1911
- <div className='table-list__item-content-block table-list__item-content-block--center'>
2373
+ <div className="table-list__item-content-block table-list__item-content-block--center">
1912
2374
  <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
1913
2375
  </div>
1914
- <div className='table-list__item-content-block'>
1915
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2376
+ <div className="table-list__item-content-block">
2377
+ <IconLabel
2378
+ style="translucent"
2379
+ text="Label success"
2380
+ type="success"
2381
+ icon="time"
2382
+ />
1916
2383
  </div>
1917
2384
  </div>
1918
- <div className='table-list__slide-in-actions'>
1919
- <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
2385
+ <div className="table-list__slide-in-actions">
2386
+ <IconButton
2387
+ icon="dots-vertical"
2388
+ size="small"
2389
+ ariaValue="More actions"
2390
+ onClick={() => false}
2391
+ />
1920
2392
  </div>
1921
2393
  </div>
1922
2394
 
1923
- <div className='table-list__add-bar-container'>
1924
- <Tooltip text='Add item' flow='top'>
1925
- <div className='table-list__add-bar'>
1926
- <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
2395
+ <div className="table-list__add-bar-container">
2396
+ <Tooltip text="Add item" flow="top">
2397
+ <div className="table-list__add-bar">
2398
+ <Button
2399
+ type="primary"
2400
+ icon="plus-large"
2401
+ text="Add item"
2402
+ size="small"
2403
+ shape="round"
2404
+ iconOnly={true}
2405
+ onClick={() => false}
2406
+ />
1927
2407
  </div>
1928
2408
  </Tooltip>
1929
2409
  </div>
1930
2410
  </li>
1931
2411
 
1932
- <li className='table-list__item-container'>
1933
- <div className='table-list__item table-list__item--clickable table-list__item--draggable'>
1934
- <div className='table-list__item-content'>
1935
- <div className='table-list__item-content-block'>
1936
- <Label style='translucent' type='warning' text='pokr' />
1937
- <Label style='translucent' text='slika' />
2412
+ <li className="table-list__item-container">
2413
+ <div className="table-list__item table-list__item--clickable table-list__item--draggable">
2414
+ <div className="table-list__item-content">
2415
+ <div className="table-list__item-content-block">
2416
+ <Label style="translucent" type="warning" text="pokr" />
2417
+ <Label style="translucent" text="slika" />
1938
2418
  </div>
1939
- <div className='table-list__item-content-block table-list__item-content-block--center'>
2419
+ <div className="table-list__item-content-block table-list__item-content-block--center">
1940
2420
  <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
1941
2421
  </div>
1942
- <div className='table-list__item-content-block'>
1943
- <IconLabel style='translucent' text='Label success' type='success' icon='time' />
2422
+ <div className="table-list__item-content-block">
2423
+ <IconLabel
2424
+ style="translucent"
2425
+ text="Label success"
2426
+ type="success"
2427
+ icon="time"
2428
+ />
1944
2429
  </div>
1945
2430
  </div>
1946
- <div className='table-list__slide-in-actions'>
1947
- <IconButton icon='pencil' size='small' ariaValue='More actions' onClick={()=> false} />
1948
- <IconButton icon='trash' size='small' ariaValue='More actions' onClick={()=> false} />
2431
+ <div className="table-list__slide-in-actions">
2432
+ <IconButton
2433
+ icon="pencil"
2434
+ size="small"
2435
+ ariaValue="More actions"
2436
+ onClick={() => false}
2437
+ />
2438
+ <IconButton
2439
+ icon="trash"
2440
+ size="small"
2441
+ ariaValue="More actions"
2442
+ onClick={() => false}
2443
+ />
1949
2444
  </div>
1950
2445
  </div>
1951
2446
 
1952
- <div className='table-list__add-bar-container'>
1953
- <Tooltip text='Add item' flow='top'>
1954
- <div className='table-list__add-bar'>
1955
- <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
2447
+ <div className="table-list__add-bar-container">
2448
+ <Tooltip text="Add item" flow="top">
2449
+ <div className="table-list__add-bar">
2450
+ <Button
2451
+ type="primary"
2452
+ icon="plus-large"
2453
+ text="Add item"
2454
+ size="small"
2455
+ shape="round"
2456
+ iconOnly={true}
2457
+ onClick={() => false}
2458
+ />
1956
2459
  </div>
1957
2460
  </Tooltip>
1958
2461
  </div>
@@ -1966,25 +2469,50 @@ export class TestGround extends React.Component<IProps, IState> {
1966
2469
  <hr />
1967
2470
 
1968
2471
  <div className="sd-check__group-new sd-check__group-new--vertical">
1969
- <Checkbox label={{text: 'Label side not defined'}} onChange={(value) => console.log('value changed', value)} />
1970
- <Checkbox label={{text: 'Defined label side - right', side: 'end'}} onChange={(value) => console.log('value changed', value)} />
1971
- <Checkbox label={{text: 'This checkbox is disabled'}} onChange={(value) => console.log('value changed', value)} disabled={true} />
2472
+ <Checkbox
2473
+ label={{text: 'Label side not defined'}}
2474
+ onChange={(value) => console.log('value changed', value)}
2475
+ />
2476
+ <Checkbox
2477
+ label={{text: 'Defined label side - right', side: 'end'}}
2478
+ onChange={(value) => console.log('value changed', value)}
2479
+ />
2480
+ <Checkbox
2481
+ label={{text: 'This checkbox is disabled'}}
2482
+ onChange={(value) => console.log('value changed', value)}
2483
+ disabled={true}
2484
+ />
1972
2485
  </div>
1973
2486
 
1974
2487
  <hr />
1975
2488
 
1976
- <Checkbox label={{text: 'Defined label side - left', side: 'start'}} onChange={(value) => console.log('value changed', value)} />
2489
+ <Checkbox
2490
+ label={{text: 'Defined label side - left', side: 'start'}}
2491
+ onChange={(value) => console.log('value changed', value)}
2492
+ />
1977
2493
 
1978
2494
  <hr />
1979
2495
 
1980
- <Checkbox label={{text: 'The label is hidden here', hidden: true}} onChange={(value) => console.log('value changed', value)} />
2496
+ <Checkbox
2497
+ label={{text: 'The label is hidden here', hidden: true}}
2498
+ onChange={(value) => console.log('value changed', value)}
2499
+ />
1981
2500
 
1982
2501
  <hr />
1983
2502
 
1984
2503
  <div className="sd-check-button__group sd-check-button__group--start">
1985
- <CheckboxButton label={{text: 'CheckboxButton rules!'}} onChange={(value) => console.log('value changed', value)} />
1986
- <CheckboxButton label={{text: 'CheckboxButton rules again!', icon: 'th'}} onChange={(value) => console.log('value changed', value)} />
1987
- <CheckboxButton label={{text: 'Hell yeah!'}} onChange={(value) => console.log('value changed', value)} />
2504
+ <CheckboxButton
2505
+ label={{text: 'CheckboxButton rules!'}}
2506
+ onChange={(value) => console.log('value changed', value)}
2507
+ />
2508
+ <CheckboxButton
2509
+ label={{text: 'CheckboxButton rules again!', icon: 'th'}}
2510
+ onChange={(value) => console.log('value changed', value)}
2511
+ />
2512
+ <CheckboxButton
2513
+ label={{text: 'Hell yeah!'}}
2514
+ onChange={(value) => console.log('value changed', value)}
2515
+ />
1988
2516
  </div>
1989
2517
 
1990
2518
  <hr />
@@ -1992,13 +2520,15 @@ export class TestGround extends React.Component<IProps, IState> {
1992
2520
  <h3 className="docs-page__h3 sd-margin-y--0 sd-margin-b--3">Duration input</h3>
1993
2521
 
1994
2522
  <div className="sd-input">
1995
- <label className="sd-input__label" id="duration01">Input label</label>
2523
+ <label className="sd-input__label" id="duration01">
2524
+ Input label
2525
+ </label>
1996
2526
  <div className="sd-input__duration-input" id="id06" aria-describedby="duration01">
1997
- <input type="number" className="" placeholder='00'/>
2527
+ <input type="number" className="" placeholder="00" />
1998
2528
  <span className="sd-input__suffix">h</span>
1999
- <input type="number" className="" placeholder='00'/>
2529
+ <input type="number" className="" placeholder="00" />
2000
2530
  <span className="sd-input__suffix">m</span>
2001
- <input type="number" className="" placeholder='00'/>
2531
+ <input type="number" className="" placeholder="00" />
2002
2532
  <span className="sd-input__suffix">s</span>
2003
2533
  </div>
2004
2534
  <div className="sd-input__char-count">0 / 30</div>
@@ -2019,11 +2549,11 @@ export class TestGround extends React.Component<IProps, IState> {
2019
2549
  <RadioGroup
2020
2550
  value={this.state.value2}
2021
2551
  options={[
2022
- {label: "Radio 1", value: "somevalue1"},
2023
- {label: "Radio 2", value: "somevalue2"},
2024
- {label: "Radio 3", value: "somevalue3"},
2552
+ {label: 'Radio 1', value: 'somevalue1'},
2553
+ {label: 'Radio 2', value: 'somevalue2'},
2554
+ {label: 'Radio 3', value: 'somevalue3'},
2025
2555
  ]}
2026
- onChange={(value) => this.setState(() => ({ value2: value }))}
2556
+ onChange={(value) => this.setState(() => ({value2: value}))}
2027
2557
  />
2028
2558
  </div>
2029
2559
 
@@ -2033,11 +2563,16 @@ export class TestGround extends React.Component<IProps, IState> {
2033
2563
  <RadioButtonGroup
2034
2564
  value={this.state.value3 ?? ''}
2035
2565
  options={[
2036
- {label: "RadioButton with an icon", value: "somevalue4", icon: "th-list"},
2037
- {label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true},
2038
- {label: "Normal RadioButton", value: "somevalue6"},
2566
+ {label: 'RadioButton with an icon', value: 'somevalue4', icon: 'th-list'},
2567
+ {
2568
+ label: 'RadioButton with no visible text, only an icon',
2569
+ value: 'somevalue5',
2570
+ icon: 'th',
2571
+ labelHidden: true,
2572
+ },
2573
+ {label: 'Normal RadioButton', value: 'somevalue6'},
2039
2574
  ]}
2040
- onChange={(value) => this.setState(() => ({ value3: value }))}
2575
+ onChange={(value) => this.setState(() => ({value3: value}))}
2041
2576
  />
2042
2577
  </div>
2043
2578
 
@@ -2046,10 +2581,10 @@ export class TestGround extends React.Component<IProps, IState> {
2046
2581
  <div className="sd-thumb-carousel" data-theme="dark-ui">
2047
2582
  <div className="sd-thumb-carousel__header">
2048
2583
  <h4 className="sd-thumb-carousel__heading">Mountain bike Championships gallery</h4>
2049
- <Badge text='6' type='light' />
2584
+ <Badge text="6" type="light" />
2050
2585
  <div className="sd-thumb-carousel__header-block--r">
2051
2586
  <time>Today, 08. April 14:25</time>
2052
- <IconButton icon="trash" ariaValue="Remove" onClick={()=> false} />
2587
+ <IconButton icon="trash" ariaValue="Remove" onClick={() => false} />
2053
2588
  </div>
2054
2589
  </div>
2055
2590
  <div className="sd-thumb-carousel__content">
@@ -2084,17 +2619,22 @@ export class TestGround extends React.Component<IProps, IState> {
2084
2619
  </button>
2085
2620
  </div>
2086
2621
  <ul className="sd-thumb-carousel__indicators">
2087
- <li className="sd-thumb-carousel__indicator sd-thumb-carousel__indicator--highlight"><button aria-label="1"></button></li>
2088
- <li className="sd-thumb-carousel__indicator"><button aria-label="2"></button></li>
2089
- <li className="sd-thumb-carousel__indicator"><button aria-label="3"></button></li>
2090
-
2622
+ <li className="sd-thumb-carousel__indicator sd-thumb-carousel__indicator--highlight">
2623
+ <button aria-label="1"></button>
2624
+ </li>
2625
+ <li className="sd-thumb-carousel__indicator">
2626
+ <button aria-label="2"></button>
2627
+ </li>
2628
+ <li className="sd-thumb-carousel__indicator">
2629
+ <button aria-label="3"></button>
2630
+ </li>
2091
2631
  </ul>
2092
2632
  </div>
2093
2633
  <div className="sd-thumb-carousel__description">
2094
2634
  Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.
2095
- Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.
2096
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis
2097
- parturient montes, nascetur ridiculus mus.
2635
+ Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis
2636
+ euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque
2637
+ penatibus et magnis dis parturient montes, nascetur ridiculus mus.
2098
2638
  </div>
2099
2639
  </div>
2100
2640
 
@@ -2108,57 +2648,63 @@ export class TestGround extends React.Component<IProps, IState> {
2108
2648
 
2109
2649
  <hr />
2110
2650
 
2111
- <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
2651
+ <Container className="sd-padding--4 sd-panel-bg--100 sd-radius--large">
2112
2652
  <ThemeSelector
2113
- size='small'
2653
+ size="small"
2114
2654
  options={[
2115
2655
  {label: 'Light', value: 'light', theme: 'light'},
2116
2656
  {label: 'Dark', value: 'dark', theme: 'dark'},
2117
- {label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
2657
+ {
2658
+ label: 'High Contrast',
2659
+ value: 'high-contrast',
2660
+ theme: 'contrast-light',
2661
+ disabled: true,
2662
+ },
2118
2663
  ]}
2119
- onChange={($event)=>{this.setState({selctedTheme: $event})}} value={this.state.selctedTheme}
2664
+ onChange={($event) => {
2665
+ this.setState({selctedTheme: $event});
2666
+ }}
2667
+ value={this.state.selctedTheme}
2120
2668
  />
2121
2669
  </Container>
2122
2670
 
2123
2671
  <hr />
2124
2672
 
2125
- <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
2126
- <Button text="Exit" type='primary' onClick={()=> false} />
2673
+ <Container className="sd-padding--4 sd-panel-bg--100 sd-radius--large">
2674
+ <Button text="Exit" type="primary" onClick={() => false} />
2127
2675
  <Divider />
2128
- <Button text="Cancel" onClick={()=> false} />
2676
+ <Button text="Cancel" onClick={() => false} />
2129
2677
  <Divider />
2130
- <Button text="Save" type='primary' onClick={()=> false} />
2678
+ <Button text="Save" type="primary" onClick={() => false} />
2131
2679
  </Container>
2132
2680
 
2133
2681
  <hr />
2134
2682
 
2135
- <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
2136
- <InputWrapper
2137
- label="Label"
2138
- invalid={false}>
2139
- <input type='text' />
2683
+ <Container className="sd-padding--4 sd-panel-bg--100 sd-radius--large">
2684
+ <InputWrapper label="Label" invalid={false}>
2685
+ <input type="text" />
2140
2686
  </InputWrapper>
2141
2687
  </Container>
2142
2688
 
2143
2689
  <hr />
2144
2690
 
2145
- <Container className='sd-padding--4 sd-panel-bg--100 sd-radius--large'>
2146
- <div className='sd-dropzone__drop-target'>
2147
- <div className='sd-dropzone__target-border'></div>
2148
- <figure className='sd-dropzone__icon'>
2149
- <Icon name='upload-alt' size='big' />
2691
+ <Container className="sd-padding--4 sd-panel-bg--100 sd-radius--large">
2692
+ <div className="sd-dropzone__drop-target">
2693
+ <div className="sd-dropzone__target-border"></div>
2694
+ <figure className="sd-dropzone__icon">
2695
+ <Icon name="upload-alt" size="big" />
2150
2696
  </figure>
2151
- <h4 className='sd-dropzone__heading'>
2152
- Upload files
2153
- </h4>
2154
- <p className='sd-dropzone__description'>Drag one or more files here to upload them, or just click the button below.</p>
2155
- <button className='btn btn--hollow sd-dropzone__action'>Attach files</button>
2697
+ <h4 className="sd-dropzone__heading">Upload files</h4>
2698
+ <p className="sd-dropzone__description">
2699
+ Drag one or more files here to upload them, or just click the button below.
2700
+ </p>
2701
+ <button className="btn btn--hollow sd-dropzone__action">Attach files</button>
2156
2702
  </div>
2157
2703
  </Container>
2158
2704
  </Components.MainPanel>
2159
2705
  {/* MAIN CONTENT (Monitoring) */}
2160
2706
  </Components.LayoutContainer>
2161
- </Components.Layout >
2707
+ </Components.Layout>
2162
2708
  );
2163
2709
  }
2164
2710
  }