superdesk-ui-framework 3.1.5 → 3.1.6

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 (266) hide show
  1. package/app/styles/_helpers.scss +317 -151
  2. package/app/styles/design-tokens/_design-tokens-general.scss +18 -7
  3. package/app/styles/design-tokens/_new-colors.scss +6 -1
  4. package/app/styles/grids/_grid-layout.scss +1 -0
  5. package/app/styles/interface-elements/_side-panel.scss +4 -0
  6. package/app-typescript/components/IconPicker.tsx +1 -1
  7. package/{examples/pages/react → dist/components}/Index.tsx +81 -63
  8. package/dist/components/utilities/SpacingUtilities.tsx +774 -0
  9. package/dist/components/utilities/TextUtilities.tsx +428 -0
  10. package/dist/components.html +6 -27
  11. package/dist/{components → components_deprecated}/text.html +7 -7
  12. package/dist/components_deprecated.html +38 -0
  13. package/dist/design/buttons.html +1 -11
  14. package/dist/design/checkbox-and-radio.html +3 -3
  15. package/dist/design/layout-principles.html +0 -1
  16. package/dist/design/switch.html +0 -10
  17. package/dist/design-patterns/Index.tsx +86 -0
  18. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +362 -0
  19. package/{examples/pages/react.html → dist/design-patterns.html} +3 -4
  20. package/dist/design.html +4 -4
  21. package/dist/examples.bundle.css +106 -20
  22. package/dist/examples.bundle.js +3195 -1443
  23. package/dist/main.html +17 -15
  24. package/dist/playgrounds/boxed-list.html +7 -7
  25. package/dist/playgrounds/master-desk.html +4 -4
  26. package/dist/playgrounds/photo-snippets/edit-photo-metadata.html +1 -1
  27. package/dist/playgrounds/planning-snippets/edit-planning.html +1 -1
  28. package/dist/playgrounds/planning.html +1 -1
  29. package/dist/playgrounds/publisher-content-analytics.html +25 -25
  30. package/dist/playgrounds/react-playgrounds/TestGround.tsx +3 -3
  31. package/dist/playgrounds/video-editor.html +1 -1
  32. package/dist/playgrounds.html +3 -6
  33. package/dist/superdesk-ui.bundle.css +314 -119
  34. package/dist/superdesk-ui.bundle.js +105 -101
  35. package/examples/css/docs-page.css +106 -20
  36. package/examples/index.js +89 -89
  37. package/examples/js/doc.js +16 -2
  38. package/examples/js/react.js +122 -19
  39. package/{dist/react → examples/pages/components}/Index.tsx +81 -63
  40. package/examples/pages/components/utilities/SpacingUtilities.tsx +774 -0
  41. package/examples/pages/components/utilities/TextUtilities.tsx +428 -0
  42. package/examples/pages/components.html +6 -27
  43. package/examples/pages/{components → components_deprecated}/text.html +7 -7
  44. package/examples/pages/components_deprecated.html +38 -0
  45. package/examples/pages/design/buttons.html +1 -11
  46. package/examples/pages/design/checkbox-and-radio.html +3 -3
  47. package/examples/pages/design/layout-principles.html +0 -1
  48. package/examples/pages/design/switch.html +0 -10
  49. package/examples/pages/design-patterns/Index.tsx +86 -0
  50. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +362 -0
  51. package/{dist/react.html → examples/pages/design-patterns.html} +3 -4
  52. package/examples/pages/design.html +4 -4
  53. package/examples/pages/main.html +17 -15
  54. package/examples/pages/playgrounds/boxed-list.html +7 -7
  55. package/examples/pages/playgrounds/master-desk.html +4 -4
  56. package/examples/pages/playgrounds/photo-snippets/edit-photo-metadata.html +1 -1
  57. package/examples/pages/playgrounds/planning-snippets/edit-planning.html +1 -1
  58. package/examples/pages/playgrounds/planning.html +1 -1
  59. package/examples/pages/playgrounds/publisher-content-analytics.html +25 -25
  60. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +3 -3
  61. package/examples/pages/playgrounds/video-editor.html +1 -1
  62. package/examples/pages/playgrounds.html +3 -6
  63. package/package.json +1 -1
  64. package/react/components/IconPicker.js +1 -1
  65. /package/dist/{react → components}/Alerts.tsx +0 -0
  66. /package/dist/{react → components}/Autocomplete.tsx +0 -0
  67. /package/dist/{react → components}/Avatar.tsx +0 -0
  68. /package/dist/{react → components}/Badges.tsx +0 -0
  69. /package/dist/{react → components}/BigIconFont.tsx +0 -0
  70. /package/dist/{react → components}/BoxedList.tsx +0 -0
  71. /package/dist/{react → components}/ButtonGroups.tsx +0 -0
  72. /package/dist/{react → components}/Buttons.tsx +0 -0
  73. /package/dist/{react → components}/Carousel.tsx +0 -0
  74. /package/dist/{react → components}/Checkboxs.tsx +0 -0
  75. /package/dist/{react → components}/Container.tsx +0 -0
  76. /package/dist/{react → components}/ContentDivider.tsx +0 -0
  77. /package/dist/{react → components}/ContentList.tsx +0 -0
  78. /package/dist/{react → components}/CreateButton.tsx +0 -0
  79. /package/dist/{react → components}/DatePicker.tsx +0 -0
  80. /package/dist/{react → components}/DragHandleDocs.tsx +0 -0
  81. /package/dist/{react → components}/DropZone.tsx +0 -0
  82. /package/dist/{react → components}/Dropdowns.tsx +0 -0
  83. /package/dist/{react → components}/DurationInput.tsx +0 -0
  84. /package/dist/{react → components}/EmptyStates.tsx +0 -0
  85. /package/dist/{react → components}/GridItem.tsx +0 -0
  86. /package/dist/{react → components}/GridList.tsx +0 -0
  87. /package/dist/{react → components}/Heading.tsx +0 -0
  88. /package/dist/{react → components}/IconButtons.tsx +0 -0
  89. /package/dist/{react → components}/IconFont.tsx +0 -0
  90. /package/dist/{react → components}/IconLabels.tsx +0 -0
  91. /package/dist/{react → components}/IconPicker.tsx +0 -0
  92. /package/dist/{react → components}/IllustrationButton.tsx +0 -0
  93. /package/dist/{react → components}/Inputs.tsx +0 -0
  94. /package/dist/{react → components}/Labels.tsx +0 -0
  95. /package/dist/{react → components}/LeftNavigations.tsx +0 -0
  96. /package/dist/{react → components}/ListItems.tsx +0 -0
  97. /package/dist/{react → components}/Menu.tsx +0 -0
  98. /package/dist/{react → components}/Modal.tsx +0 -0
  99. /package/dist/{react → components}/MultiSelect.tsx +0 -0
  100. /package/dist/{react → components}/NavButtons.tsx +0 -0
  101. /package/dist/{react → components}/Panel.tsx +0 -0
  102. /package/dist/{react → components}/Popover.tsx +0 -0
  103. /package/dist/{react → components}/QuickNavigationBar.tsx +0 -0
  104. /package/dist/{react → components}/RadioGroup.tsx +0 -0
  105. /package/dist/{react → components}/ResizablePanels.tsx +0 -0
  106. /package/dist/{react → components}/SelectGrid.tsx +0 -0
  107. /package/dist/{react → components}/SelectWithTemplate.tsx +0 -0
  108. /package/dist/{react → components}/Selects.tsx +0 -0
  109. /package/dist/{react → components}/SimpleList.tsx +0 -0
  110. /package/dist/{react → components}/SubNav.tsx +0 -0
  111. /package/dist/{react → components}/Switch.tsx +0 -0
  112. /package/dist/{react → components}/TableList.tsx +0 -0
  113. /package/dist/{react → components}/Tabs.tsx +0 -0
  114. /package/dist/{react → components}/TagInputDocs.tsx +0 -0
  115. /package/dist/{react → components}/Tags.tsx +0 -0
  116. /package/dist/{react → components}/Text.tsx +0 -0
  117. /package/dist/{react → components}/TimePicker.tsx +0 -0
  118. /package/dist/{react → components}/Toasts.tsx +0 -0
  119. /package/dist/{react → components}/Togglebox.tsx +0 -0
  120. /package/dist/{react → components}/Tooltips.tsx +0 -0
  121. /package/dist/{react → components}/TreeMenu.tsx +0 -0
  122. /package/dist/{react → components}/TreeSelect.tsx +0 -0
  123. /package/dist/{react → components}/WithPaginationDocs.tsx +0 -0
  124. /package/dist/{react → components}/WithSizeObserver.tsx +0 -0
  125. /package/dist/{react → components}/tree-select/TreeSelect.tsx +0 -0
  126. /package/dist/{react → components}/tree-select/example-1.tsx +0 -0
  127. /package/dist/{react → components}/tree-select/example-2.tsx +0 -0
  128. /package/dist/{components → components_deprecated}/alerts.html +0 -0
  129. /package/dist/{components → components_deprecated}/badge.html +0 -0
  130. /package/dist/{components → components_deprecated}/basic-grid.html +0 -0
  131. /package/dist/{components → components_deprecated}/big-icons.html +0 -0
  132. /package/dist/{components → components_deprecated}/buttons.html +0 -0
  133. /package/dist/{components → components_deprecated}/carousel.html +0 -0
  134. /package/dist/{components → components_deprecated}/checkbox.html +0 -0
  135. /package/dist/{components → components_deprecated}/colors.html +0 -0
  136. /package/dist/{components → components_deprecated}/dropdown.html +0 -0
  137. /package/dist/{components → components_deprecated}/form-layout.html +0 -0
  138. /package/dist/{components → components_deprecated}/icon-labels.html +0 -0
  139. /package/dist/{components → components_deprecated}/icons.html +0 -0
  140. /package/dist/{components → components_deprecated}/input.html +0 -0
  141. /package/dist/{components → components_deprecated}/labels.html +0 -0
  142. /package/dist/{components → components_deprecated}/layout-grid.html +0 -0
  143. /package/dist/{components → components_deprecated}/left-nav.html +0 -0
  144. /package/dist/{components → components_deprecated}/list-item.html +0 -0
  145. /package/dist/{components → components_deprecated}/loader.html +0 -0
  146. /package/dist/{components → components_deprecated}/modal-template.html +0 -0
  147. /package/dist/{components → components_deprecated}/modals.html +0 -0
  148. /package/dist/{components → components_deprecated}/other-elements.html +0 -0
  149. /package/dist/{components → components_deprecated}/panel-info.html +0 -0
  150. /package/dist/{components → components_deprecated}/radio.html +0 -0
  151. /package/dist/{components → components_deprecated}/select.html +0 -0
  152. /package/dist/{components → components_deprecated}/shadows.html +0 -0
  153. /package/dist/{components → components_deprecated}/sidebar-menu.html +0 -0
  154. /package/dist/{components → components_deprecated}/simple-list.html +0 -0
  155. /package/dist/{components → components_deprecated}/slider.html +0 -0
  156. /package/dist/{components → components_deprecated}/spacing.html +0 -0
  157. /package/dist/{components → components_deprecated}/switch.html +0 -0
  158. /package/dist/{components → components_deprecated}/tables.html +0 -0
  159. /package/dist/{components → components_deprecated}/tabs.html +0 -0
  160. /package/dist/{components → components_deprecated}/tag-input.html +0 -0
  161. /package/dist/{components → components_deprecated}/tag-labels.html +0 -0
  162. /package/dist/{components → components_deprecated}/toggle.html +0 -0
  163. /package/dist/{components → components_deprecated}/tooltips.html +0 -0
  164. /package/dist/{components → components_deprecated}/vertical-tabs.html +0 -0
  165. /package/dist/{components → components_deprecated}/wizard.html +0 -0
  166. /package/examples/pages/{react → components}/Alerts.tsx +0 -0
  167. /package/examples/pages/{react → components}/Autocomplete.tsx +0 -0
  168. /package/examples/pages/{react → components}/Avatar.tsx +0 -0
  169. /package/examples/pages/{react → components}/Badges.tsx +0 -0
  170. /package/examples/pages/{react → components}/BigIconFont.tsx +0 -0
  171. /package/examples/pages/{react → components}/BoxedList.tsx +0 -0
  172. /package/examples/pages/{react → components}/ButtonGroups.tsx +0 -0
  173. /package/examples/pages/{react → components}/Buttons.tsx +0 -0
  174. /package/examples/pages/{react → components}/Carousel.tsx +0 -0
  175. /package/examples/pages/{react → components}/Checkboxs.tsx +0 -0
  176. /package/examples/pages/{react → components}/Container.tsx +0 -0
  177. /package/examples/pages/{react → components}/ContentDivider.tsx +0 -0
  178. /package/examples/pages/{react → components}/ContentList.tsx +0 -0
  179. /package/examples/pages/{react → components}/CreateButton.tsx +0 -0
  180. /package/examples/pages/{react → components}/DatePicker.tsx +0 -0
  181. /package/examples/pages/{react → components}/DragHandleDocs.tsx +0 -0
  182. /package/examples/pages/{react → components}/DropZone.tsx +0 -0
  183. /package/examples/pages/{react → components}/Dropdowns.tsx +0 -0
  184. /package/examples/pages/{react → components}/DurationInput.tsx +0 -0
  185. /package/examples/pages/{react → components}/EmptyStates.tsx +0 -0
  186. /package/examples/pages/{react → components}/GridItem.tsx +0 -0
  187. /package/examples/pages/{react → components}/GridList.tsx +0 -0
  188. /package/examples/pages/{react → components}/Heading.tsx +0 -0
  189. /package/examples/pages/{react → components}/IconButtons.tsx +0 -0
  190. /package/examples/pages/{react → components}/IconFont.tsx +0 -0
  191. /package/examples/pages/{react → components}/IconLabels.tsx +0 -0
  192. /package/examples/pages/{react → components}/IconPicker.tsx +0 -0
  193. /package/examples/pages/{react → components}/IllustrationButton.tsx +0 -0
  194. /package/examples/pages/{react → components}/Inputs.tsx +0 -0
  195. /package/examples/pages/{react → components}/Labels.tsx +0 -0
  196. /package/examples/pages/{react → components}/LeftNavigations.tsx +0 -0
  197. /package/examples/pages/{react → components}/ListItems.tsx +0 -0
  198. /package/examples/pages/{react → components}/Menu.tsx +0 -0
  199. /package/examples/pages/{react → components}/Modal.tsx +0 -0
  200. /package/examples/pages/{react → components}/MultiSelect.tsx +0 -0
  201. /package/examples/pages/{react → components}/NavButtons.tsx +0 -0
  202. /package/examples/pages/{react → components}/Panel.tsx +0 -0
  203. /package/examples/pages/{react → components}/Popover.tsx +0 -0
  204. /package/examples/pages/{react → components}/QuickNavigationBar.tsx +0 -0
  205. /package/examples/pages/{react → components}/RadioGroup.tsx +0 -0
  206. /package/examples/pages/{react → components}/ResizablePanels.tsx +0 -0
  207. /package/examples/pages/{react → components}/SelectGrid.tsx +0 -0
  208. /package/examples/pages/{react → components}/SelectWithTemplate.tsx +0 -0
  209. /package/examples/pages/{react → components}/Selects.tsx +0 -0
  210. /package/examples/pages/{react → components}/SimpleList.tsx +0 -0
  211. /package/examples/pages/{react → components}/SubNav.tsx +0 -0
  212. /package/examples/pages/{react → components}/Switch.tsx +0 -0
  213. /package/examples/pages/{react → components}/TableList.tsx +0 -0
  214. /package/examples/pages/{react → components}/Tabs.tsx +0 -0
  215. /package/examples/pages/{react → components}/TagInputDocs.tsx +0 -0
  216. /package/examples/pages/{react → components}/Tags.tsx +0 -0
  217. /package/examples/pages/{react → components}/Text.tsx +0 -0
  218. /package/examples/pages/{react → components}/TimePicker.tsx +0 -0
  219. /package/examples/pages/{react → components}/Toasts.tsx +0 -0
  220. /package/examples/pages/{react → components}/Togglebox.tsx +0 -0
  221. /package/examples/pages/{react → components}/Tooltips.tsx +0 -0
  222. /package/examples/pages/{react → components}/TreeMenu.tsx +0 -0
  223. /package/examples/pages/{react → components}/TreeSelect.tsx +0 -0
  224. /package/examples/pages/{react → components}/WithPaginationDocs.tsx +0 -0
  225. /package/examples/pages/{react → components}/WithSizeObserver.tsx +0 -0
  226. /package/examples/pages/{react → components}/tree-select/TreeSelect.tsx +0 -0
  227. /package/examples/pages/{react → components}/tree-select/example-1.tsx +0 -0
  228. /package/examples/pages/{react → components}/tree-select/example-2.tsx +0 -0
  229. /package/examples/pages/{components → components_deprecated}/alerts.html +0 -0
  230. /package/examples/pages/{components → components_deprecated}/badge.html +0 -0
  231. /package/examples/pages/{components → components_deprecated}/basic-grid.html +0 -0
  232. /package/examples/pages/{components → components_deprecated}/big-icons.html +0 -0
  233. /package/examples/pages/{components → components_deprecated}/buttons.html +0 -0
  234. /package/examples/pages/{components → components_deprecated}/carousel.html +0 -0
  235. /package/examples/pages/{components → components_deprecated}/checkbox.html +0 -0
  236. /package/examples/pages/{components → components_deprecated}/colors.html +0 -0
  237. /package/examples/pages/{components → components_deprecated}/dropdown.html +0 -0
  238. /package/examples/pages/{components → components_deprecated}/form-layout.html +0 -0
  239. /package/examples/pages/{components → components_deprecated}/icon-labels.html +0 -0
  240. /package/examples/pages/{components → components_deprecated}/icons.html +0 -0
  241. /package/examples/pages/{components → components_deprecated}/input.html +0 -0
  242. /package/examples/pages/{components → components_deprecated}/labels.html +0 -0
  243. /package/examples/pages/{components → components_deprecated}/layout-grid.html +0 -0
  244. /package/examples/pages/{components → components_deprecated}/left-nav.html +0 -0
  245. /package/examples/pages/{components → components_deprecated}/list-item.html +0 -0
  246. /package/examples/pages/{components → components_deprecated}/loader.html +0 -0
  247. /package/examples/pages/{components → components_deprecated}/modal-template.html +0 -0
  248. /package/examples/pages/{components → components_deprecated}/modals.html +0 -0
  249. /package/examples/pages/{components → components_deprecated}/other-elements.html +0 -0
  250. /package/examples/pages/{components → components_deprecated}/panel-info.html +0 -0
  251. /package/examples/pages/{components → components_deprecated}/radio.html +0 -0
  252. /package/examples/pages/{components → components_deprecated}/select.html +0 -0
  253. /package/examples/pages/{components → components_deprecated}/shadows.html +0 -0
  254. /package/examples/pages/{components → components_deprecated}/sidebar-menu.html +0 -0
  255. /package/examples/pages/{components → components_deprecated}/simple-list.html +0 -0
  256. /package/examples/pages/{components → components_deprecated}/slider.html +0 -0
  257. /package/examples/pages/{components → components_deprecated}/spacing.html +0 -0
  258. /package/examples/pages/{components → components_deprecated}/switch.html +0 -0
  259. /package/examples/pages/{components → components_deprecated}/tables.html +0 -0
  260. /package/examples/pages/{components → components_deprecated}/tabs.html +0 -0
  261. /package/examples/pages/{components → components_deprecated}/tag-input.html +0 -0
  262. /package/examples/pages/{components → components_deprecated}/tag-labels.html +0 -0
  263. /package/examples/pages/{components → components_deprecated}/toggle.html +0 -0
  264. /package/examples/pages/{components → components_deprecated}/tooltips.html +0 -0
  265. /package/examples/pages/{components → components_deprecated}/vertical-tabs.html +0 -0
  266. /package/examples/pages/{components → components_deprecated}/wizard.html +0 -0
package/dist/main.html CHANGED
@@ -3,9 +3,9 @@
3
3
  <h1 class="docs-page__h1">Superdesk UI</h1>
4
4
  <ul class="docs-page__header-nav">
5
5
  <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
6
- <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
7
6
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
8
- <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
7
+ <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
8
+ <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
9
9
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
10
10
  </ul>
11
11
  </header>
@@ -20,42 +20,44 @@
20
20
  <div class="docs-page__container docs-page__container--medium">
21
21
  <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-4">
22
22
 
23
- <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design">
23
+ <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/components">
24
24
  <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
25
25
  <div class="sd-card__thumbnail sd-padding-x--1">
26
- <img src="/illustration--design.svg" alt="Design guidelines">
26
+ <img src="/illustration--react.svg" alt="React">
27
27
  </div>
28
28
  </div>
29
29
  <div class="sd-card__content">
30
- <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Design guidelines</h4>
31
- <p class="docs-page__paragraph--light sd-text__center">What to do and what not while creating user interfaces in Superdesk.</p>
30
+ <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Components</h4>
31
+ <p class="docs-page__paragraph--light sd-text-align--center">Superdesk UI components in React.</p>
32
32
  </div>
33
33
  </a>
34
34
 
35
- <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/components">
35
+ <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design-patterns">
36
36
  <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
37
37
  <div class="sd-card__thumbnail sd-padding-x--1">
38
38
  <img src="/illustration--components.svg" alt="Superdesk UI Components">
39
39
  </div>
40
40
  </div>
41
41
  <div class="sd-card__content sd-padding-x--1">
42
- <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Components</h4>
43
- <p class="docs-page__paragraph--light sd-text__center">Superdesk HTML/CSS and Angular UI components.</p>
42
+ <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Design Patterns</h4>
43
+ <p class="docs-page__paragraph--light sd-text-align--center">Examples of reusable solutions for common UI patterns in Superdesk.</p>
44
44
  </div>
45
45
  </a>
46
46
 
47
- <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/react">
47
+ <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/design">
48
48
  <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
49
49
  <div class="sd-card__thumbnail sd-padding-x--1">
50
- <img src="/illustration--react.svg" alt="React">
50
+ <img src="/illustration--design.svg" alt="Design guidelines">
51
51
  </div>
52
52
  </div>
53
53
  <div class="sd-card__content">
54
- <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">React</h4>
55
- <p class="docs-page__paragraph--light sd-text__center">React UI components. Still in early stages, but will hopefully grow quickly.</p>
54
+ <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Design guidelines</h4>
55
+ <p class="docs-page__paragraph--light sd-text-align--center">What to do and what not while creating user interfaces in Superdesk.</p>
56
56
  </div>
57
57
  </a>
58
58
 
59
+
60
+
59
61
  <a class="sd-card sd-card--with-click sd-card--blank sd-card--rounded flex-grid__item" href="#/playgrounds">
60
62
  <div class="sd-card__header sd-card__header--with-thumb sd-card__header--blank">
61
63
  <div class="sd-card__thumbnail sd-padding-x--1">
@@ -63,8 +65,8 @@
63
65
  </div>
64
66
  </div>
65
67
  <div class="sd-card__content">
66
- <h4 class="sd-card__content-heading sd-text__serif sd-text__center docs-page__color--primary">Playground</h4>
67
- <p class="docs-page__paragraph--light sd-text__center">Examples and drafts for more complex modules and full-page layouts.</p>
68
+ <h4 class="sd-card__content-heading sd-text__serif sd-text-align--center docs-page__color--primary">Playground</h4>
69
+ <p class="docs-page__paragraph--light sd-text-align--center">Examples, full-page layouts and design drafts.</p>
68
70
  </div>
69
71
  </a>
70
72
 
@@ -70,7 +70,7 @@
70
70
  </div>
71
71
  <div class="boxed-list__item-content">
72
72
  <div class="boxed-list__item-content-row">
73
- <span class="sd-text__strong sd-overflow-ellipsis">Pellentesque ornare lacinia</span>
73
+ <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare lacinia</span>
74
74
  <span class="label label--success ml-auto">success</span>
75
75
  </div>
76
76
  <div class="boxed-list__item-content-row">
@@ -85,7 +85,7 @@
85
85
  </div>
86
86
  <div class="boxed-list__item-content">
87
87
  <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
88
- <span class="sd-text__strong sd-overflow-ellipsis">Max Mustermann</span>
88
+ <span class="sd-text--bold sd-overflow-ellipsis">Max Mustermann</span>
89
89
  <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
90
90
  </div>
91
91
  <div class="boxed-list__item-content-row">
@@ -102,7 +102,7 @@
102
102
  </div>
103
103
  <div class="boxed-list__item-content">
104
104
  <div class="boxed-list__item-content-row">
105
- <span class="sd-text__strong-s">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
105
+ <span class="sd-text--bold-s">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</span>
106
106
  </div>
107
107
  </div>
108
108
  <div class="boxed-list__static-actions">
@@ -115,7 +115,7 @@
115
115
  </div>
116
116
  <div class="boxed-list__item-content">
117
117
  <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
118
- <span class="sd-text__strong sd-overflow-ellipsis">Jane Doe</span>
118
+ <span class="sd-text--bold sd-overflow-ellipsis">Jane Doe</span>
119
119
  <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.04.2019</time>
120
120
  </div>
121
121
  <div class="boxed-list__item-content-row">
@@ -133,14 +133,14 @@
133
133
  <span class="ml-auto">by Jane Doe</span>
134
134
  </div>
135
135
  <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
136
- <span class="sd-text__strong sd-overflow-ellipsis">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
136
+ <span class="sd-text--bold sd-overflow-ellipsis">Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Aenean eu leo quam.</span>
137
137
  </div>
138
138
  <div class="boxed-list__item-content-row">
139
- <span><span class="sd-text__italic">desk:</span> National</span> <span class="ml-auto"><span class="sd-text__italic">stage:</span> Working</span>
139
+ <span><span class="sd-text--italic">desk:</span> National</span> <span class="ml-auto"><span class="sd-text--italic">stage:</span> Working</span>
140
140
  </div>
141
141
  </div>
142
142
  <div class="boxed-list__item-footer">
143
- <span class="sd-text__italic sd-padding-r--1">version: 25</span> <span class="label label--yellow2 label--hollow">in progress</span> <button class="btn btn--small btn--hollow ml-auto">revert</button>
143
+ <span class="sd-text--italic sd-padding-r--1">version: 25</span> <span class="label label--yellow2 label--hollow">in progress</span> <button class="btn btn--small btn--hollow ml-auto">revert</button>
144
144
  </div>
145
145
 
146
146
  </li>
@@ -1587,7 +1587,7 @@
1587
1587
  </div>
1588
1588
  <div class="boxed-list__item-content">
1589
1589
  <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
1590
- <span class="sd-text__strong sd-overflow-ellipsis">Max Mustermann</span>
1590
+ <span class="sd-text--bold sd-overflow-ellipsis">Max Mustermann</span>
1591
1591
  <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
1592
1592
  </div>
1593
1593
  <div class="boxed-list__item-content-row">
@@ -1629,7 +1629,7 @@
1629
1629
  </div>
1630
1630
  <div class="boxed-list__item-content">
1631
1631
  <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
1632
- <span class="sd-text__strong sd-overflow-ellipsis">Walter Sobchak</span>
1632
+ <span class="sd-text--bold sd-overflow-ellipsis">Walter Sobchak</span>
1633
1633
  <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
1634
1634
  </div>
1635
1635
  <div class="boxed-list__item-content-row">
@@ -1643,7 +1643,7 @@
1643
1643
  </div>
1644
1644
  <div class="boxed-list__item-content">
1645
1645
  <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
1646
- <span class="sd-text__strong sd-overflow-ellipsis">Jeff Lebowski</span>
1646
+ <span class="sd-text--bold sd-overflow-ellipsis">Jeff Lebowski</span>
1647
1647
  <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
1648
1648
  </div>
1649
1649
  <div class="boxed-list__item-content-row">
@@ -1657,7 +1657,7 @@
1657
1657
  </div>
1658
1658
  <div class="boxed-list__item-content">
1659
1659
  <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
1660
- <span class="sd-text__strong sd-overflow-ellipsis">Bunny Lebowski</span>
1660
+ <span class="sd-text--bold sd-overflow-ellipsis">Bunny Lebowski</span>
1661
1661
  <time class="sd-text__date-time sd-text__date-time--small ml-auto">25.09.2020</time>
1662
1662
  </div>
1663
1663
  <div class="boxed-list__item-content-row">
@@ -152,7 +152,7 @@
152
152
  </div>
153
153
  <div class="form__row">
154
154
  <label class="form-label form-label--light">Name</label>
155
- <p class="sd-text__strong">Event name</p>
155
+ <p class="sd-text--bold">Event name</p>
156
156
  </div>
157
157
  <div class="form__row">
158
158
  <label class="form-label form-label--light">Date</label>
@@ -176,7 +176,7 @@
176
176
  </div>
177
177
  <div class="form__row">
178
178
  <label class="form-label form-label--light">Name</label>
179
- <p class="sd-text__strong">Event name</p>
179
+ <p class="sd-text--bold">Event name</p>
180
180
  </div>
181
181
  <div class="form__row">
182
182
  <label class="form-label form-label--light">Date</label>
@@ -870,7 +870,7 @@
870
870
  </div>
871
871
  <div class="form__row">
872
872
  <label class="form-label form-label--light">Name</label>
873
- <p class="sd-text__strong">Duis dolore</p>
873
+ <p class="sd-text--bold">Duis dolore</p>
874
874
  </div>
875
875
  <div class="form__row">
876
876
  <label class="form-label form-label--light">Description</label>
@@ -230,16 +230,16 @@
230
230
  </div>
231
231
  <div class="sd-flex-table__row">
232
232
  <div class="sd-flex-table__cell sd-flex-grow">
233
- <div class="sd-text__strong">
233
+ <div class="sd-text--bold">
234
234
  <strong>Nisi quis eiusmod nostrud pariatur amet.</strong>
235
235
  </div>
236
236
  <div>
237
- <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">Culture</span>
238
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Donald Duck</span>
239
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
237
+ <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">Culture</span>
238
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Donald Duck</span>
239
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
240
240
  </div>
241
241
  </div>
242
- <div class="sd-flex-table__cell sd-text__center">
242
+ <div class="sd-flex-table__cell sd-text-align--center">
243
243
  <a class="icn-btn" target="_blank" href="#">
244
244
  <i class="icon-external"></i>
245
245
  </a>
@@ -256,16 +256,16 @@
256
256
  </div>
257
257
  <div class="sd-flex-table__row">
258
258
  <div class="sd-flex-table__cell sd-flex-grow">
259
- <div class="sd-text__strong">
259
+ <div class="sd-text--bold">
260
260
  <strong>Mollit sit ut mollit dolor laborum nisi adipisicing minim.</strong>
261
261
  </div>
262
262
  <div>
263
- <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">Sport, News</span>
264
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Jack Daniels, Mickey Mouse</span>
265
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
263
+ <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">Sport, News</span>
264
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Jack Daniels, Mickey Mouse</span>
265
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
266
266
  </div>
267
267
  </div>
268
- <div class="sd-flex-table__cell sd-text__center">
268
+ <div class="sd-flex-table__cell sd-text-align--center">
269
269
  <a class="icn-btn" target="_blank" href="#">
270
270
  <i class="icon-external"></i>
271
271
  </a>
@@ -282,16 +282,16 @@
282
282
  </div>
283
283
  <div class="sd-flex-table__row">
284
284
  <div class="sd-flex-table__cell sd-flex-grow">
285
- <div class="sd-text__strong">
285
+ <div class="sd-text--bold">
286
286
  <strong>Enim enim cupidatat duis eu deserunt.</strong>
287
287
  </div>
288
288
  <div>
289
- <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">News, Business</span>
290
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Donald Trump</span>
291
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
289
+ <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">News, Business</span>
290
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Donald Trump</span>
291
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
292
292
  </div>
293
293
  </div>
294
- <div class="sd-flex-table__cell sd-text__center">
294
+ <div class="sd-flex-table__cell sd-text-align--center">
295
295
  <a class="icn-btn" target="_blank" href="#">
296
296
  <i class="icon-external"></i>
297
297
  </a>
@@ -308,16 +308,16 @@
308
308
  </div>
309
309
  <div class="sd-flex-table__row">
310
310
  <div class="sd-flex-table__cell sd-flex-grow">
311
- <div class="sd-text__strong">
311
+ <div class="sd-text--bold">
312
312
  <strong>Sit qui aliqua dolore dolor aliqua ut officia incididunt reprehenderit ad laboris qui proident.</strong>
313
313
  </div>
314
314
  <div>
315
- <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">News, Business</span>
316
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Donald Trump</span>
317
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
315
+ <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">News, Business</span>
316
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Donald Trump</span>
317
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
318
318
  </div>
319
319
  </div>
320
- <div class="sd-flex-table__cell sd-text__center">
320
+ <div class="sd-flex-table__cell sd-text-align--center">
321
321
  <a class="icn-btn" target="_blank" href="#">
322
322
  <i class="icon-external"></i>
323
323
  </a>
@@ -334,16 +334,16 @@
334
334
  </div>
335
335
  <div class="sd-flex-table__row">
336
336
  <div class="sd-flex-table__cell sd-flex-grow">
337
- <div class="sd-text__strong">
337
+ <div class="sd-text--bold">
338
338
  <strong>Elit eu laboris nulla laborum irure dolor ut.</strong>
339
339
  </div>
340
340
  <div>
341
- <span class="sd-text__date-time sd-text__italic">Category:</span><span class="sd-text__normal">Sport, News</span>
342
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Authors:</span><span class="sd-text__normal">Jack Daniels, Mickey Mouse</span>
343
- <span class="sd-text__date-time sd-text__italic sd-margin-l--1">Published:</span><time>1 week ago</time>
341
+ <span class="sd-text__date-time sd-text--italic">Category:</span><span class="sd-text--normal">Sport, News</span>
342
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Authors:</span><span class="sd-text--normal">Jack Daniels, Mickey Mouse</span>
343
+ <span class="sd-text__date-time sd-text--italic sd-margin-l--1">Published:</span><time>1 week ago</time>
344
344
  </div>
345
345
  </div>
346
- <div class="sd-flex-table__cell sd-text__center">
346
+ <div class="sd-flex-table__cell sd-text-align--center">
347
347
  <a class="icn-btn" target="_blank" href="#">
348
348
  <i class="icon-external"></i>
349
349
  </a>
@@ -1,6 +1,6 @@
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, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton } from '../../../../app-typescript/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, SvgIconIllustration, IllustrationButton } from '../../../../app-typescript/index';
4
4
  import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
5
5
  import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
6
6
 
@@ -337,7 +337,7 @@ export class TestGround extends React.Component<IProps, IState> {
337
337
  <Option>All events</Option>
338
338
  </Select>
339
339
  <ContentDivider type="solid" margin="medium" />
340
- <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
340
+ <Heading type='h3' className='mb-1 sd-text--bold'>Related Planning(s)</Heading>
341
341
  <Text size='small' className='mb-1'>
342
342
  <strong>You made changes to a planning item that is a part of a recurring event</strong>.
343
343
  Apply the changes to all recurring planning items or just this one?
@@ -397,7 +397,7 @@ export class TestGround extends React.Component<IProps, IState> {
397
397
  footerTemplate={modalSaveEventFooterThree}
398
398
  onHide={() => {this.setState({modalSaveEvent3: false})}}
399
399
  >
400
- <Heading type='h3' className='mb-1 sd-text--strong'>Related Planning(s)</Heading>
400
+ <Heading type='h3' className='mb-1 sd-text--bold'>Related Planning(s)</Heading>
401
401
  <Text size='small' className='mb-1'>
402
402
  <strong>You made changes to a planning item that is a part of a recurring event</strong>.
403
403
  Apply the changes to all recurring planning items or just this one?
@@ -598,7 +598,7 @@
598
598
  </button>
599
599
  <span class="sd-photo-preview__label mlr-auto">DJI_0270.mp4</span>
600
600
  <div>
601
- <span class="sd-text__strong-s">Quality:</span>
601
+ <span class="sd-text--bold-s">Quality:</span>
602
602
  <div class="dropdown dropdown--align-right" dropdown>
603
603
  <button class="dropdown__toggle dark-ui" dropdown__toggle>
604
604
  Same<span class="dropdown__caret dropdown__caret--white"></span>
@@ -3,9 +3,9 @@
3
3
  <h1 class="docs-page__h1">Superdesk UI</h1>
4
4
  <ul class="docs-page__header-nav">
5
5
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/">Home</a></li>
6
- <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
7
6
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/components">Components</a></li>
8
- <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/react">React</a></li>
7
+ <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design-patterns">Design Patterns</a></li>
8
+ <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
9
9
  <li class="docs-page__header-nav-item docs-page__header-nav-item--active"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
10
10
  </ul>
11
11
  </header>
@@ -15,12 +15,10 @@
15
15
  <img src="/illustration--playground.svg" alt="React">
16
16
  </figure>
17
17
  <h2 class="docs-page__hero-h2 docs-page__color--primary">UI Playgrounds</h2>
18
- <p class="docs-page__hero-text">Examples and drafts for more complex modules<br>
19
- and full-page layouts.</p>
18
+ <p class="docs-page__hero-text">Examples, full-page layouts and design drafts.</p>
20
19
  </div>
21
20
  <section class="docs-page__container sd-margin-t--0">
22
21
  <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-3">
23
-
24
22
  <div class="sd-card flex-grid__item" ng-repeat="(group, content) in playgrounds">
25
23
  <div class="sd-card__header sd-card__header--with-thumb sd-card__header--gradient-1">
26
24
  <div class="sd-card__thumbnail sd-card__thumbnail--size-xxs">
@@ -36,7 +34,6 @@
36
34
  </ul>
37
35
  </div>
38
36
  </div>
39
-
40
37
  </div>
41
38
  </section>
42
39
  </main>