@rio-cloud/uikit-mcp 1.1.6 → 1.1.8

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 (201) hide show
  1. package/README.md +13 -17
  2. package/dist/doc-metadata.json +125 -295
  3. package/dist/docs/components/accentBar.md +16 -69
  4. package/dist/docs/components/activity.md +7 -44
  5. package/dist/docs/components/animatedNumber.md +3 -11
  6. package/dist/docs/components/animatedTextReveal.md +3 -31
  7. package/dist/docs/components/animations.md +21 -54
  8. package/dist/docs/components/appHeader.md +11 -30
  9. package/dist/docs/components/appLayout.md +36 -172
  10. package/dist/docs/components/appNavigationBar.md +1 -24
  11. package/dist/docs/components/areaCharts.md +7 -22
  12. package/dist/docs/components/aspectRatioPlaceholder.md +1 -9
  13. package/dist/docs/components/assetTree.md +141 -374
  14. package/dist/docs/components/autosuggests.md +3 -102
  15. package/dist/docs/components/avatar.md +1 -16
  16. package/dist/docs/components/banner.md +4 -37
  17. package/dist/docs/components/barCharts.md +20 -75
  18. package/dist/docs/components/barList.md +9 -77
  19. package/dist/docs/components/basicMap.md +1 -67
  20. package/dist/docs/components/bottomSheet.md +2 -28
  21. package/dist/docs/components/button.md +12 -65
  22. package/dist/docs/components/buttonToolbar.md +5 -19
  23. package/dist/docs/components/calendarStripe.md +48 -106
  24. package/dist/docs/components/card.md +1 -9
  25. package/dist/docs/components/carousel.md +1 -14
  26. package/dist/docs/components/chartColors.md +1 -156
  27. package/dist/docs/components/chartsGettingStarted.md +1 -1
  28. package/dist/docs/components/chat.md +2 -81
  29. package/dist/docs/components/checkbox.md +11 -72
  30. package/dist/docs/components/circularProgress.md +8 -49
  31. package/dist/docs/components/clearableInput.md +3 -62
  32. package/dist/docs/components/collapse.md +2 -15
  33. package/dist/docs/components/composedCharts.md +16 -26
  34. package/dist/docs/components/contentLoader.md +7 -25
  35. package/dist/docs/components/dataTabs.md +16 -104
  36. package/dist/docs/components/datepickers.md +710 -962
  37. package/dist/docs/components/dialogs.md +5 -67
  38. package/dist/docs/components/divider.md +1 -33
  39. package/dist/docs/components/dropdowns.md +3412 -5600
  40. package/dist/docs/components/editableContent.md +4 -82
  41. package/dist/docs/components/expander.md +15 -88
  42. package/dist/docs/components/fade.md +4 -61
  43. package/dist/docs/components/fadeExpander.md +1 -7
  44. package/dist/docs/components/fadeUp.md +2 -76
  45. package/dist/docs/components/feedback.md +9 -68
  46. package/dist/docs/components/filePickers.md +4 -18
  47. package/dist/docs/components/formLabel.md +7 -27
  48. package/dist/docs/components/groupedItemList.md +2 -158
  49. package/dist/docs/components/iconList.md +8 -65
  50. package/dist/docs/components/imagePreloader.md +1 -9
  51. package/dist/docs/components/labeledElement.md +3 -18
  52. package/dist/docs/components/licensePlate.md +1 -43
  53. package/dist/docs/components/lineCharts.md +7 -38
  54. package/dist/docs/components/listMenu.md +2 -34
  55. package/dist/docs/components/loadMore.md +5 -24
  56. package/dist/docs/components/mainNavigation.md +1 -9
  57. package/dist/docs/components/mapCircle.md +1 -23
  58. package/dist/docs/components/mapCluster.md +2 -54
  59. package/dist/docs/components/mapContext.md +1 -23
  60. package/dist/docs/components/mapDraggableMarker.md +2 -28
  61. package/dist/docs/components/mapGettingStarted.md +2 -2
  62. package/dist/docs/components/mapInfoBubble.md +1 -27
  63. package/dist/docs/components/mapLayerGroup.md +1 -23
  64. package/dist/docs/components/mapMarker.md +1 -99
  65. package/dist/docs/components/mapPolygon.md +2 -116
  66. package/dist/docs/components/mapRoute.md +6 -1465
  67. package/dist/docs/components/mapRouteGenerator.md +1 -1
  68. package/dist/docs/components/mapSettings.md +11 -128
  69. package/dist/docs/components/mapUtils.md +10 -113
  70. package/dist/docs/components/multiselects.md +14 -163
  71. package/dist/docs/components/noData.md +8 -22
  72. package/dist/docs/components/notifications.md +3 -19
  73. package/dist/docs/components/numbercontrol.md +3 -47
  74. package/dist/docs/components/onboarding.md +3 -15
  75. package/dist/docs/components/page.md +1 -33
  76. package/dist/docs/components/pager.md +1 -17
  77. package/dist/docs/components/pieCharts.md +40 -71
  78. package/dist/docs/components/popover.md +1 -12
  79. package/dist/docs/components/position.md +2 -6
  80. package/dist/docs/components/radialBarCharts.md +32 -116
  81. package/dist/docs/components/radioCardGroup.md +6 -48
  82. package/dist/docs/components/radiobutton.md +6 -75
  83. package/dist/docs/components/releaseNotes.md +3 -21
  84. package/dist/docs/components/resizer.md +1 -7
  85. package/dist/docs/components/responsiveColumnStripe.md +9 -49
  86. package/dist/docs/components/responsiveVideo.md +1 -7
  87. package/dist/docs/components/rioglyph.md +1 -17
  88. package/dist/docs/components/rules.md +7 -70
  89. package/dist/docs/components/saveableInput.md +267 -401
  90. package/dist/docs/components/selects.md +27 -1164
  91. package/dist/docs/components/sidebar.md +6 -17
  92. package/dist/docs/components/sliders.md +1 -27
  93. package/dist/docs/components/smoothScrollbars.md +1 -73
  94. package/dist/docs/components/spinners.md +6 -51
  95. package/dist/docs/components/states.md +6 -92
  96. package/dist/docs/components/statsWidgets.md +1 -76
  97. package/dist/docs/components/statusBar.md +1 -57
  98. package/dist/docs/components/stepButton.md +2 -7
  99. package/dist/docs/components/steppedProgressBars.md +5 -62
  100. package/dist/docs/components/subNavigation.md +1 -31
  101. package/dist/docs/components/supportMarker.md +2 -14
  102. package/dist/docs/components/svgImage.md +1 -5
  103. package/dist/docs/components/switch.md +2 -33
  104. package/dist/docs/components/tables.md +1 -1
  105. package/dist/docs/components/tagManager.md +1 -41
  106. package/dist/docs/components/tags.md +1 -138
  107. package/dist/docs/components/teaser.md +2 -122
  108. package/dist/docs/components/textTruncateMiddle.md +2 -9
  109. package/dist/docs/components/timeline.md +1 -99
  110. package/dist/docs/components/timepicker.md +4 -79
  111. package/dist/docs/components/toggleButton.md +2 -15
  112. package/dist/docs/components/tooltip.md +9 -30
  113. package/dist/docs/components/tracker.md +2 -19
  114. package/dist/docs/components/virtualList.md +57 -123
  115. package/dist/docs/foundations.md +753 -4073
  116. package/dist/docs/start/changelog.md +793 -1
  117. package/dist/docs/start/goodtoknow.md +1 -1
  118. package/dist/docs/start/guidelines/color-combinations.md +149 -483
  119. package/dist/docs/start/guidelines/custom-css.md +1 -1
  120. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  121. package/dist/docs/start/guidelines/formatting.md +1 -1
  122. package/dist/docs/start/guidelines/iframe.md +4 -16
  123. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  124. package/dist/docs/start/guidelines/print-css.md +1 -1
  125. package/dist/docs/start/guidelines/spinner.md +13 -67
  126. package/dist/docs/start/guidelines/state-in-url.md +1 -1
  127. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  128. package/dist/docs/start/guidelines/writing.md +1 -1
  129. package/dist/docs/start/howto.md +11 -11
  130. package/dist/docs/start/intro.md +1 -1
  131. package/dist/docs/start/responsiveness.md +1 -1
  132. package/dist/docs/utilities/classNames.md +3 -18
  133. package/dist/docs/utilities/deviceUtils.md +7 -13
  134. package/dist/docs/utilities/featureToggles.md +1 -1
  135. package/dist/docs/utilities/fuelTypeUtils.md +2 -12
  136. package/dist/docs/utilities/routeUtils.md +25 -343
  137. package/dist/docs/utilities/useAfterMount.md +1 -6
  138. package/dist/docs/utilities/useAutoAnimate.md +2 -15
  139. package/dist/docs/utilities/useAverage.md +1 -6
  140. package/dist/docs/utilities/useClickOutside.md +1 -5
  141. package/dist/docs/utilities/useClipboard.md +2 -6
  142. package/dist/docs/utilities/useCookies.md +2 -10
  143. package/dist/docs/utilities/useCount.md +7 -16
  144. package/dist/docs/utilities/useDarkMode.md +2 -6
  145. package/dist/docs/utilities/useDebugInfo.md +6 -20
  146. package/dist/docs/utilities/useEffectOnce.md +1 -6
  147. package/dist/docs/utilities/useElapsedTime.md +2 -6
  148. package/dist/docs/utilities/useElementSize.md +1 -7
  149. package/dist/docs/utilities/useEsc.md +1 -5
  150. package/dist/docs/utilities/useEvent.md +1 -5
  151. package/dist/docs/utilities/useFocusTrap.md +1 -5
  152. package/dist/docs/utilities/useFullscreen.md +2 -15
  153. package/dist/docs/utilities/useHover.md +1 -5
  154. package/dist/docs/utilities/useIncomingPostMessages.md +2 -18
  155. package/dist/docs/utilities/useInterval.md +2 -8
  156. package/dist/docs/utilities/useIsFocusWithin.md +1 -10
  157. package/dist/docs/utilities/useKey.md +1 -15
  158. package/dist/docs/utilities/useLocalStorage.md +2 -11
  159. package/dist/docs/utilities/useLocationSuggestions.md +1 -5
  160. package/dist/docs/utilities/useMax.md +1 -5
  161. package/dist/docs/utilities/useMin.md +1 -5
  162. package/dist/docs/utilities/useMutationObserver.md +3 -11
  163. package/dist/docs/utilities/useOnScreen.md +1 -8
  164. package/dist/docs/utilities/useOnlineStatus.md +1 -5
  165. package/dist/docs/utilities/usePostMessage.md +3 -9
  166. package/dist/docs/utilities/usePostMessageSender.md +3 -13
  167. package/dist/docs/utilities/usePrevious.md +1 -5
  168. package/dist/docs/utilities/useResizeObserver.md +3 -11
  169. package/dist/docs/utilities/useRioCookieConsent.md +1 -5
  170. package/dist/docs/utilities/useScrollPosition.md +3 -59
  171. package/dist/docs/utilities/useSearch.md +2 -16
  172. package/dist/docs/utilities/useSearchHighlight.md +13 -78
  173. package/dist/docs/utilities/useSorting.md +18 -43
  174. package/dist/docs/utilities/useStateWithValidation.md +1 -5
  175. package/dist/docs/utilities/useSum.md +1 -9
  176. package/dist/docs/utilities/useTableExport.md +42 -59
  177. package/dist/docs/utilities/useTableSelection.md +75 -120
  178. package/dist/docs/utilities/useTimeout.md +2 -6
  179. package/dist/docs/utilities/useToggle.md +4 -14
  180. package/dist/docs/utilities/useUrlState.md +2 -27
  181. package/dist/docs/utilities/useWindowResize.md +1 -5
  182. package/dist/index.mjs +46 -10
  183. package/dist/version.json +2 -2
  184. package/package.json +2 -2
  185. package/dist/docs/templates/common-table.md +0 -1112
  186. package/dist/docs/templates/detail-views.md +0 -942
  187. package/dist/docs/templates/expandable-details.md +0 -228
  188. package/dist/docs/templates/feature-cards.md +0 -549
  189. package/dist/docs/templates/form-summary.md +0 -199
  190. package/dist/docs/templates/form-toggle.md +0 -367
  191. package/dist/docs/templates/list-blocks.md +0 -1021
  192. package/dist/docs/templates/loading-progress.md +0 -109
  193. package/dist/docs/templates/options-panel.md +0 -152
  194. package/dist/docs/templates/panel-variants.md +0 -164
  195. package/dist/docs/templates/progress-cards.md +0 -607
  196. package/dist/docs/templates/progress-success.md +0 -142
  197. package/dist/docs/templates/settings-form.md +0 -434
  198. package/dist/docs/templates/stats-blocks.md +0 -1381
  199. package/dist/docs/templates/table-panel.md +0 -184
  200. package/dist/docs/templates/table-row-animation.md +0 -317
  201. package/dist/docs/templates/usage-cards.md +0 -227
package/dist/docs/templates/progress-cards.md DELETED
@@ -1,607 +0,0 @@
1
- # Progress cards
2
-
3
- *Category:* Templates
4
- *Section:* Progress
5
- *Source:* https://uikit.developers.rio.cloud/#/templates/progress-cards
6
- *Captured:* 2026-02-23T13:48:44.192Z
7
-
8
- ## Progress cards
9
-
10
- ### Example: 12% more than last week
11
-
12
- Weekly report
13
- Orders processed
14
-
15
- 80%
16
-
17
- 12% more than last week
18
-
19
- Open rate
20
-
21
- 3.1%
22
-
23
- 3.1% more than last week
24
-
25
- Error rate
26
-
27
- 2.01%
28
-
29
- 2.01% more than last week
30
-
31
- #### Summary
32
-
33
- Weekly report
34
- Orders processed
35
-
36
- 80%
37
-
38
- 12% more than last week
39
-
40
- Open rate
41
-
42
- 3.1%
43
-
44
- 3.1% more than last week
45
-
46
- Error rate
47
-
48
- 2.01%
49
-
50
- 2.01% more than last week
51
-
52
- #### React (tsx)
53
-
54
- ```tsx
55
- import { FormattedNumber } from 'react-intl';
56
-
57
- import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
58
-
59
- export default () => {
60
- return (
61
- <div className='margin-25-md'>
62
- <div className='margin-auto max-width-600'>
63
- <div className='display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default'>
64
- <div className='text-bold text-size-16 text-color-darker'>Weekly report</div>
65
- <StatsWidget className='border-none'>
66
- <div className='display-flex justify-content-between gap-5'>
67
- <div className='display-flex align-items-center'>
68
- <div className='margin-right-3 text-color-darker text-medium'>Orders processed</div>
69
- </div>
70
- <span className='display-flex align-items-center gap-3 text-color-success'>
71
- <span className='rioglyph rioglyph-arrow-up' />
72
- <FormattedNumber value={80} style='unit' unit='percent' />
73
- </span>
74
- </div>
75
- <div className='progress margin-y-5'>
76
- <div className='progress-bar bg-info' style={{ width: `${80}%` }} />
77
- </div>
78
- <div className='text-color-dark text-size-12'>12% more than last week</div>
79
- </StatsWidget>
80
- <StatsWidget className='border-none'>
81
- <div className='display-flex justify-content-between gap-5'>
82
- <div className='display-flex align-items-center'>
83
- <div className='margin-right-3 text-color-darker text-medium'>Open rate</div>
84
- </div>
85
- <span className='display-flex align-items-center gap-3 text-color-success'>
86
- <span className='rioglyph rioglyph-arrow-up' />
87
- <FormattedNumber value={3.1} style='unit' unit='percent' />
88
- </span>
89
- </div>
90
- <div className='progress margin-y-5'>
91
- <div className='progress-bar bg-info' style={{ width: `${74}%` }} />
92
- </div>
93
- <div className='text-color-dark text-size-12'>3.1% more than last week</div>
94
- </StatsWidget>
95
- <StatsWidget className='border-none'>
96
- <div className='display-flex justify-content-between gap-5'>
97
- <div className='display-flex align-items-center'>
98
- <div className='margin-right-3 text-color-darker text-medium'>Error rate</div>
99
- </div>
100
- <span className='display-flex align-items-center gap-3 text-color-danger'>
101
- <span className='rioglyph rioglyph-arrow-up' />
102
- <FormattedNumber value={2.01} style='unit' unit='percent' />
103
- </span>
104
- </div>
105
- <div className='progress margin-y-5'>
106
- <div className='progress-bar bg-info' style={{ width: `${37}%` }} />
107
- </div>
108
- <div className='text-color-dark text-size-12'>2.01% more than last week</div>
109
- </StatsWidget>
110
- </div>
111
- </div>
112
- </div>
113
- );
114
- };
115
- ```
116
-
117
- #### HTML (html)
118
-
119
- ```html
120
- <div class="margin-25-md">
121
- <div class="margin-auto max-width-600">
122
- <div class="display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default">
123
- <div class="text-bold text-size-16 text-color-darker">Weekly report</div>
124
- <div class="StatsWidget border-none">
125
- <div class="display-flex justify-content-between gap-5">
126
- <div class="display-flex align-items-center">
127
- <div class="margin-right-3 text-color-darker text-medium">Orders processed</div>
128
- </div>
129
- <span class="display-flex align-items-center gap-3 text-color-success">
130
- <span class="rioglyph rioglyph-arrow-up">
131
- </span>80%</span>
132
- </div>
133
- <div class="progress margin-y-5">
134
- <div class="progress-bar bg-info" style="width: 80%;">
135
- </div>
136
- </div>
137
- <div class="text-color-dark text-size-12">12% more than last week</div>
138
- </div>
139
- <div class="StatsWidget border-none">
140
- <div class="display-flex justify-content-between gap-5">
141
- <div class="display-flex align-items-center">
142
- <div class="margin-right-3 text-color-darker text-medium">Open rate</div>
143
- </div>
144
- <span class="display-flex align-items-center gap-3 text-color-success">
145
- <span class="rioglyph rioglyph-arrow-up">
146
- </span>3.1%</span>
147
- </div>
148
- <div class="progress margin-y-5">
149
- <div class="progress-bar bg-info" style="width: 74%;">
150
- </div>
151
- </div>
152
- <div class="text-color-dark text-size-12">3.1% more than last week</div>
153
- </div>
154
- <div class="StatsWidget border-none">
155
- <div class="display-flex justify-content-between gap-5">
156
- <div class="display-flex align-items-center">
157
- <div class="margin-right-3 text-color-darker text-medium">Error rate</div>
158
- </div>
159
- <span class="display-flex align-items-center gap-3 text-color-danger">
160
- <span class="rioglyph rioglyph-arrow-up">
161
- </span>2.01%</span>
162
- </div>
163
- <div class="progress margin-y-5">
164
- <div class="progress-bar bg-info" style="width: 37%;">
165
- </div>
166
- </div>
167
- <div class="text-color-dark text-size-12">2.01% more than last week</div>
168
- </div>
169
- </div>
170
- </div>
171
- </div>
172
- ```
173
-
174
- ### Example: Example 2
175
-
176
- Shipment volume by region
177
-
178
- RegionShipments
179
-
180
- Germany3,550
181
-
182
- France1,798
183
-
184
- Italy1,245
185
-
186
- Poland986
187
-
188
- Netherlands854
189
-
190
- Austria650
191
-
192
- Switzerland420
193
-
194
- #### Summary
195
-
196
- Shipment volume by region
197
-
198
- RegionShipments
199
-
200
- Germany3,550
201
-
202
- France1,798
203
-
204
- Italy1,245
205
-
206
- Poland986
207
-
208
- Netherlands854
209
-
210
- Austria650
211
-
212
- Switzerland420
213
-
214
- #### React (tsx)
215
-
216
- ```tsx
217
- import { FormattedNumber } from 'react-intl';
218
-
219
- import Button from '@rio-cloud/rio-uikit/Button';
220
- import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
221
-
222
- export default () => {
223
- return (
224
- <div className='margin-25-md'>
225
- <div className='margin-auto max-width-500'>
226
- <div className='panel panel-default shadow-default'>
227
- <div className='panel-heading display-flex gap-20 justify-content-between align-items-center'>
228
- <div className='text-size-16 text-medium text-color-darkest'>Shipment volume by region</div>
229
- <div>
230
- <SimpleTooltip content='Share data' placement='bottom'>
231
- <Button bsStyle='muted' iconName='rioglyph-share-alt' iconOnly />
232
- </SimpleTooltip>
233
- </div>
234
- </div>
235
- <div className='panel-body padding-0'>
236
- <table className='table table-head-filled table-bottom-rounded'>
237
- <colgroup>
238
- <col className='width-150 width-100-xs' />
239
- <col className='width-80 width-60-xs' />
240
- <col />
241
- </colgroup>
242
- <thead>
243
- <tr>
244
- <th>Region</th>
245
- <th colSpan={2}>Shipments</th>
246
- </tr>
247
- </thead>
248
- <tbody>
249
- <tr>
250
- <td>Germany</td>
251
- <td>
252
- <FormattedNumber value={3_550} />
253
- </td>
254
- <td>
255
- <div className='progress progress-xs'>
256
- <div className='progress-bar bg-primary' style={{ width: '71%' }} />
257
- </div>
258
- </td>
259
- </tr>
260
- <tr>
261
- <td>France</td>
262
- <td>
263
- <FormattedNumber value={1_798} />
264
- </td>
265
- <td>
266
- <div className='progress progress-xs'>
267
- <div className='progress-bar bg-primary' style={{ width: '35.96%' }} />
268
- </div>
269
- </td>
270
- </tr>
271
- <tr>
272
- <td>Italy</td>
273
- <td>
274
- <FormattedNumber value={1_245} />
275
- </td>
276
- <td>
277
- <div className='progress progress-xs'>
278
- <div className='progress-bar bg-primary' style={{ width: '24.9%' }} />
279
- </div>
280
- </td>
281
- </tr>
282
- <tr>
283
- <td>Poland</td>
284
- <td>
285
- <FormattedNumber value={986} />
286
- </td>
287
- <td>
288
- <div className='progress progress-xs'>
289
- <div className='progress-bar bg-primary' style={{ width: '19.72%' }} />
290
- </div>
291
- </td>
292
- </tr>
293
- <tr>
294
- <td>Netherlands</td>
295
- <td>
296
- <FormattedNumber value={854} />
297
- </td>
298
- <td>
299
- <div className='progress progress-xs'>
300
- <div className='progress-bar bg-primary' style={{ width: '17.08%' }} />
301
- </div>
302
- </td>
303
- </tr>
304
- <tr>
305
- <td>Austria</td>
306
- <td>
307
- <FormattedNumber value={650} />
308
- </td>
309
- <td>
310
- <div className='progress progress-xs'>
311
- <div className='progress-bar bg-primary' style={{ width: '13%' }} />
312
- </div>
313
- </td>
314
- </tr>
315
- <tr>
316
- <td>Switzerland</td>
317
- <td>
318
- <FormattedNumber value={420} />
319
- </td>
320
- <td>
321
- <div className='progress progress-xs'>
322
- <div className='progress-bar bg-primary' style={{ width: '8.4%' }} />
323
- </div>
324
- </td>
325
- </tr>
326
- </tbody>
327
- </table>
328
- </div>
329
- </div>
330
- </div>
331
- </div>
332
- );
333
- };
334
- ```
335
-
336
- #### HTML (html)
337
-
338
- ```html
339
- <div class="margin-25-md">
340
- <div class="margin-auto max-width-500">
341
- <div class="panel panel-default shadow-default">
342
- <div class="panel-heading display-flex gap-20 justify-content-between align-items-center">
343
- <div class="text-size-16 text-medium text-color-darkest">Shipment volume by region</div>
344
- <div>
345
- <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
346
- <span class="rioglyph rioglyph-share-alt">
347
- </span>
348
- </button>
349
- </div>
350
- </div>
351
- <div class="panel-body padding-0">
352
- <table class="table table-head-filled table-bottom-rounded">
353
- <colgroup>
354
- <col class="width-150 width-100-xs">
355
- <col class="width-80 width-60-xs">
356
- <col>
357
- </colgroup>
358
- <thead>
359
- <tr>
360
- <th>Region</th>
361
- <th colspan="2">Shipments</th>
362
- </tr>
363
- </thead>
364
- <tbody>
365
- <tr>
366
- <td>Germany</td>
367
- <td>3,550</td>
368
- <td>
369
- <div class="progress progress-xs">
370
- <div class="progress-bar bg-primary" style="width: 71%;">
371
- </div>
372
- </div>
373
- </td>
374
- </tr>
375
- <tr>
376
- <td>France</td>
377
- <td>1,798</td>
378
- <td>
379
- <div class="progress progress-xs">
380
- <div class="progress-bar bg-primary" style="width: 35.96%;">
381
- </div>
382
- </div>
383
- </td>
384
- </tr>
385
- <tr>
386
- <td>Italy</td>
387
- <td>1,245</td>
388
- <td>
389
- <div class="progress progress-xs">
390
- <div class="progress-bar bg-primary" style="width: 24.9%;">
391
- </div>
392
- </div>
393
- </td>
394
- </tr>
395
- <tr>
396
- <td>Poland</td>
397
- <td>986</td>
398
- <td>
399
- <div class="progress progress-xs">
400
- <div class="progress-bar bg-primary" style="width: 19.72%;">
401
- </div>
402
- </div>
403
- </td>
404
- </tr>
405
- <tr>
406
- <td>Netherlands</td>
407
- <td>854</td>
408
- <td>
409
- <div class="progress progress-xs">
410
- <div class="progress-bar bg-primary" style="width: 17.08%;">
411
- </div>
412
- </div>
413
- </td>
414
- </tr>
415
- <tr>
416
- <td>Austria</td>
417
- <td>650</td>
418
- <td>
419
- <div class="progress progress-xs">
420
- <div class="progress-bar bg-primary" style="width: 13%;">
421
- </div>
422
- </div>
423
- </td>
424
- </tr>
425
- <tr>
426
- <td>Switzerland</td>
427
- <td>420</td>
428
- <td>
429
- <div class="progress progress-xs">
430
- <div class="progress-bar bg-primary" style="width: 8.4%;">
431
- </div>
432
- </div>
433
- </td>
434
- </tr>
435
- </tbody>
436
- </table>
437
- </div>
438
- </div>
439
- </div>
440
- </div>
441
- ```
442
-
443
- ### Example: Progress
444
-
445
- Progress
446
- Send reminder
447
- 56
448
- Participants
449
-
450
- Signed
451
- 12
452
-
453
- Waiting signature
454
- 17
455
-
456
- Manager review
457
- 22
458
-
459
- Self review
460
- 5
461
-
462
- #### Summary
463
-
464
- Progress
465
- Send reminder
466
- 56
467
- Participants
468
-
469
- Signed
470
- 12
471
-
472
- Waiting signature
473
- 17
474
-
475
- Manager review
476
- 22
477
-
478
- Self review
479
- 5
480
-
481
- #### React (tsx)
482
-
483
- ```tsx
484
- import Button from '@rio-cloud/rio-uikit/Button';
485
- import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
486
-
487
- export default () => {
488
- return (
489
- <div className='margin-25-md'>
490
- <div className='margin-auto max-width-500'>
491
- <div className='padding-20 bg-white rounded shadow-muted'>
492
- <div className='display-flex justify-content-between align-items-start margin-bottom-10'>
493
- <h3 className='text-color-darkest margin-0'>Progress</h3>
494
- <Button variant='link' iconName='rioglyph-time-alt'>
495
- Send reminder
496
- </Button>
497
- </div>
498
-
499
- <div className='display-flex align-items-end gap-5 margin-bottom-15'>
500
- <div className='text-size-h1 text-bold text-color-darkest'>56</div>
501
- <div className='text-color-dark line-height-h1'>Participants</div>
502
- </div>
503
-
504
- <div className='progress margin-bottom-20'>
505
- <div className='progress-bar progress-divider bg-info' style={{ width: '21%' }} />
506
- <div className='progress-bar progress-divider bg-spectrum-indigo' style={{ width: '30%' }} />
507
- <div className='progress-bar progress-divider bg-warning' style={{ width: '39%' }} />
508
- <div className='progress-bar progress-divider bg-gray' style={{ width: '10%' }} />
509
- </div>
510
-
511
- <div className='display-flex justify-content-between row-gap-10 flex-wrap text-color-darker'>
512
- <LabeledElement label='Signed' noGap>
513
- <div className='display-flex align-items-center gap-5'>
514
- <span className='bg-info rounded-circle height-10 aspect-ratio-1' />
515
- <span className='text-bold'>12</span>
516
- </div>
517
- </LabeledElement>
518
- <LabeledElement label='Waiting signature' noGap>
519
- <div className='display-flex align-items-center gap-5'>
520
- <span className='bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1' />
521
- <span className='text-bold'>17</span>
522
- </div>
523
- </LabeledElement>
524
- <LabeledElement label='Manager review' noGap>
525
- <div className='display-flex align-items-center gap-5'>
526
- <span className='bg-warning rounded-circle height-10 aspect-ratio-1' />
527
- <span className='text-bold'>22</span>
528
- </div>
529
- </LabeledElement>
530
- <LabeledElement label='Self review' noGap>
531
- <div className='display-flex align-items-center gap-5'>
532
- <span className='bg-gray rounded-circle height-10 aspect-ratio-1' />
533
- <span className='text-bold'>5</span>
534
- </div>
535
- </LabeledElement>
536
- </div>
537
- </div>
538
- </div>
539
- </div>
540
- );
541
- };
542
- ```
543
-
544
- #### HTML (html)
545
-
546
- ```html
547
- <div class="margin-25-md">
548
- <div class="margin-auto max-width-500">
549
- <div class="padding-20 bg-white rounded shadow-muted">
550
- <div class="display-flex justify-content-between align-items-start margin-bottom-10">
551
- <h3 class="text-color-darkest margin-0">Progress</h3>
552
- <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">
553
- <span class="rioglyph rioglyph-time-alt">
554
- </span>Send reminder</button>
555
- </div>
556
- <div class="display-flex align-items-end gap-5 margin-bottom-15">
557
- <div class="text-size-h1 text-bold text-color-darkest">56</div>
558
- <div class="text-color-dark line-height-h1">Participants</div>
559
- </div>
560
- <div class="progress margin-bottom-20">
561
- <div class="progress-bar progress-divider bg-info" style="width: 21%;">
562
- </div>
563
- <div class="progress-bar progress-divider bg-spectrum-indigo" style="width: 30%;">
564
- </div>
565
- <div class="progress-bar progress-divider bg-warning" style="width: 39%;">
566
- </div>
567
- <div class="progress-bar progress-divider bg-gray" style="width: 10%;">
568
- </div>
569
- </div>
570
- <div class="display-flex justify-content-between row-gap-10 flex-wrap text-color-darker">
571
- <div class="LabeledElement display-flex flex-column">
572
- <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Signed</div>
573
- <div class="display-flex align-items-center gap-5">
574
- <span class="bg-info rounded-circle height-10 aspect-ratio-1">
575
- </span>
576
- <span class="text-bold">12</span>
577
- </div>
578
- </div>
579
- <div class="LabeledElement display-flex flex-column">
580
- <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Waiting signature</div>
581
- <div class="display-flex align-items-center gap-5">
582
- <span class="bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1">
583
- </span>
584
- <span class="text-bold">17</span>
585
- </div>
586
- </div>
587
- <div class="LabeledElement display-flex flex-column">
588
- <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Manager review</div>
589
- <div class="display-flex align-items-center gap-5">
590
- <span class="bg-warning rounded-circle height-10 aspect-ratio-1">
591
- </span>
592
- <span class="text-bold">22</span>
593
- </div>
594
- </div>
595
- <div class="LabeledElement display-flex flex-column">
596
- <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Self review</div>
597
- <div class="display-flex align-items-center gap-5">
598
- <span class="bg-gray rounded-circle height-10 aspect-ratio-1">
599
- </span>
600
- <span class="text-bold">5</span>
601
- </div>
602
- </div>
603
- </div>
604
- </div>
605
- </div>
606
- </div>
607
- ```