@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/README.md +46 -3
  2. package/lib/components/actionBarItem/ActionBarItem.js +4 -4
  3. package/lib/components/actionBarItem/ActionBarItemPopoverContent.js +43 -0
  4. package/lib/components/actionBarItem/ActionBarOverlay.js +8 -3
  5. package/lib/components/applicationHeader/AppMenuDropdown.js +9 -13
  6. package/lib/components/applicationLayout/ApplicationLayout.js +2 -0
  7. package/lib/components/applicationLayout/ApplicationLayoutBody.js +5 -3
  8. package/lib/components/assetTree/AssetTree.js +1 -1
  9. package/lib/components/assetTree/Tree.js +2 -2
  10. package/lib/components/assetTree/TreeLeaf.js +9 -9
  11. package/lib/components/bottomSheet/BottomSheet.js +11 -7
  12. package/lib/components/carousel/Carousel.js +7 -426
  13. package/lib/components/checkbox/Checkbox.js +4 -4
  14. package/lib/components/datepicker/DatePicker.js +15 -6
  15. package/lib/components/dropdown/ButtonDropdown.js +8 -11
  16. package/lib/components/listMenu/ListMenu.js +40 -23
  17. package/lib/components/numberInput/NumberInput.js +6 -6
  18. package/lib/components/onboarding/OnboardingTip.js +9 -9
  19. package/lib/components/states/NotBookedState.js +2 -2
  20. package/lib/components/table/TableSettingsDialogFooter.js +1 -1
  21. package/lib/components/teaser/Teaser.js +1 -1
  22. package/lib/components/teaser/TeaserContainer.js +8 -8
  23. package/lib/components/tooltip/Tooltip.js +4 -4
  24. package/lib/es/DeviceUtils.d.ts +4 -2
  25. package/lib/es/deviceUtils.js +12 -0
  26. package/lib/hooks/useClipboard.js +2 -2
  27. package/lib/style/css/_exports/man-uikit.less +7 -5
  28. package/lib/style/css/_exports/rio-buyButton.less +30 -41
  29. package/lib/style/css/_exports/rio-uikit-core.less +105 -127
  30. package/lib/style/css/_exports/rio-uikit-print-utilities.less +6 -11
  31. package/lib/style/css/_exports/rio-uikit-responsive-utilities.less +6 -11
  32. package/lib/style/css/_exports/rio-uikit.less +5 -4
  33. package/lib/style/css/_exports/rio-website.less +35 -13
  34. package/lib/style/css/_exports/vw-uikit.less +10 -8
  35. package/lib/style/css/animations/_imports.less +9 -0
  36. package/lib/style/css/animations/collapse.less +16 -0
  37. package/lib/style/css/animations/fade.less +28 -0
  38. package/lib/style/css/animations/pinging.less +7 -0
  39. package/lib/style/css/animations/rotate.less +52 -0
  40. package/lib/style/css/animations/scale.less +35 -0
  41. package/lib/style/css/animations/slide.less +39 -0
  42. package/lib/style/css/animations/spinning.less +4 -0
  43. package/lib/style/css/animations/transition.less +129 -0
  44. package/lib/style/css/animations/translate.less +28 -0
  45. package/lib/style/css/components/Activity.less +93 -0
  46. package/lib/style/css/components/ApplicationHeader.less +438 -0
  47. package/lib/style/css/components/ApplicationLayout.less +236 -0
  48. package/lib/style/css/components/AssetTree.less +443 -0
  49. package/lib/style/css/components/AutoSuggest.less +22 -0
  50. package/lib/style/css/components/BottomSheet.less +14 -0
  51. package/lib/style/css/components/Carousel.less +212 -0
  52. package/lib/style/css/components/Checkbox.less +224 -0
  53. package/lib/style/css/components/ClearableInput.less +115 -0
  54. package/lib/style/css/components/Counter.less +142 -0
  55. package/lib/style/css/components/DataTabs.less +100 -0
  56. package/lib/style/css/components/DatePicker.less +391 -0
  57. package/lib/style/css/components/Dialog.less +482 -0
  58. package/lib/style/css/components/Dropdown.less +186 -0
  59. package/lib/style/css/components/Expander.less +196 -0
  60. package/lib/style/css/components/FilePicker.less +8 -0
  61. package/lib/style/css/components/ListMenu.less +77 -0
  62. package/lib/style/css/components/MapHere.less +91 -0
  63. package/lib/style/css/components/MapMarker.less +347 -0
  64. package/lib/style/css/components/MapSettings.less +140 -0
  65. package/lib/style/css/components/NoData.less +8 -0
  66. package/lib/style/css/components/Notification.less +234 -0
  67. package/lib/style/css/components/RadioButton.less +173 -0
  68. package/lib/style/css/components/Resizer.less +43 -0
  69. package/lib/style/css/components/Select.less +274 -0
  70. package/lib/style/css/components/Sidebar.less +157 -0
  71. package/lib/style/css/components/Slider.less +278 -0
  72. package/lib/style/css/components/Spinner.less +49 -0
  73. package/lib/style/css/components/StatsWidget.less +111 -0
  74. package/lib/style/css/components/SteppedProgressBar.less +323 -0
  75. package/lib/style/css/components/SupportMarker.less +34 -0
  76. package/lib/style/css/components/Switch.less +145 -0
  77. package/lib/style/css/components/TableSettingsDialog.less +96 -0
  78. package/lib/style/css/components/TableSortArrows.less +54 -0
  79. package/lib/style/css/components/Tag.less +246 -0
  80. package/lib/style/css/components/TagManager.less +4 -0
  81. package/lib/style/css/components/Teaser.less +12 -0
  82. package/lib/style/css/components/Timeline.less +69 -0
  83. package/lib/style/css/components/Tooltip.less +230 -0
  84. package/lib/style/css/design/alerts.less +55 -0
  85. package/lib/style/css/design/aspect-ratio.less +23 -0
  86. package/lib/style/css/design/badges.less +120 -0
  87. package/lib/style/css/design/blockquote.less +49 -0
  88. package/lib/style/css/design/border.less +192 -0
  89. package/lib/style/css/design/breadcrumbs.less +20 -0
  90. package/lib/style/css/design/button-groups.less +194 -0
  91. package/lib/style/css/design/buttons.less +540 -0
  92. package/lib/style/css/design/callouts.less +27 -0
  93. package/lib/style/css/design/caret.less +28 -0
  94. package/lib/style/css/design/close.less +12 -0
  95. package/lib/style/css/design/code.less +45 -0
  96. package/lib/style/css/design/colors.less +202 -0
  97. package/lib/style/css/design/cols.less +56 -0
  98. package/lib/style/css/design/container.less +29 -0
  99. package/lib/style/css/design/cursors.less +19 -0
  100. package/lib/style/css/design/custom.less +20 -0
  101. package/lib/style/css/design/ellipsis.less +46 -0
  102. package/lib/style/css/design/flexgrid.less +7 -0
  103. package/lib/style/css/design/fonts.less +318 -0
  104. package/lib/style/css/design/form-input-groups.less +245 -0
  105. package/lib/style/css/design/form-inputs.less +655 -0
  106. package/lib/style/css/design/iframe.less +80 -0
  107. package/lib/style/css/design/images.less +47 -0
  108. package/lib/style/css/design/labels.less +66 -0
  109. package/lib/style/css/design/list-group.less +95 -0
  110. package/lib/style/css/design/navs.less +254 -0
  111. package/lib/style/css/design/normalize.less +436 -0
  112. package/lib/style/css/design/opacity.less +26 -0
  113. package/lib/style/css/design/overflow.less +1 -0
  114. package/lib/style/css/design/pagination.less +161 -0
  115. package/lib/style/css/design/panels.less +105 -0
  116. package/lib/style/css/design/popovers.less +117 -0
  117. package/lib/style/css/design/position.less +16 -0
  118. package/lib/style/css/design/progress-bars.less +131 -0
  119. package/lib/style/css/design/responsive/_imports.less +68 -0
  120. package/lib/style/css/design/responsive/backgrounds.less +32 -0
  121. package/lib/style/css/design/responsive/display.less +9 -0
  122. package/lib/style/css/design/responsive/flexgrid.less +75 -0
  123. package/lib/style/css/design/responsive/floating.less +4 -0
  124. package/lib/style/css/design/responsive/gap.less +41 -0
  125. package/lib/style/css/design/responsive/hyphens.less +14 -0
  126. package/lib/style/css/design/responsive/margin.less +127 -0
  127. package/lib/style/css/design/responsive/overflow.less +16 -0
  128. package/lib/style/css/design/responsive/padding.less +71 -0
  129. package/lib/style/css/design/responsive/position.less +102 -0
  130. package/lib/style/css/design/responsive/sizing.less +115 -0
  131. package/lib/style/css/design/responsive/text.less +71 -0
  132. package/lib/style/css/design/responsive/visibility.less +115 -0
  133. package/lib/style/css/design/responsive-embed.less +31 -0
  134. package/lib/style/css/design/responsive-video.less +22 -0
  135. package/lib/style/css/design/rioglyph.less +24 -0
  136. package/lib/style/css/design/rounded.less +44 -0
  137. package/lib/style/css/design/shadows.less +65 -0
  138. package/lib/style/css/design/tables.less +976 -0
  139. package/lib/style/css/design/text.less +201 -0
  140. package/lib/style/css/design/theme.less +200 -0
  141. package/lib/style/css/design/thumbnails.less +29 -0
  142. package/lib/style/css/design/transition.less +33 -0
  143. package/lib/style/css/design/type.less +159 -0
  144. package/lib/style/css/design/utilities.less +75 -0
  145. package/lib/style/css/design/visibilty.less +38 -0
  146. package/lib/style/css/design/wells.less +17 -0
  147. package/lib/style/css/design/z-index.less +21 -0
  148. package/lib/style/css/mapping/breakpoint-map.less +44 -0
  149. package/lib/style/css/mapping/color-map.less +200 -0
  150. package/lib/style/css/mapping/cols-map.less +15 -0
  151. package/lib/style/css/mapping/numbers-map.less +16 -0
  152. package/lib/style/css/mapping/positions-map.less +21 -0
  153. package/lib/style/css/mapping/sizes-map.less +129 -0
  154. package/lib/style/css/mapping/spacings-map.less +28 -0
  155. package/lib/style/css/mixins/_mixins.less +13 -0
  156. package/lib/style/css/mixins/alerts.less +13 -0
  157. package/lib/style/css/mixins/border-radius.less +16 -0
  158. package/lib/style/css/mixins/buttons.less +117 -0
  159. package/lib/style/css/mixins/clearfix.less +9 -0
  160. package/lib/style/css/mixins/cols.less +59 -0
  161. package/lib/style/css/mixins/forms.less +61 -0
  162. package/lib/style/css/mixins/panels.less +27 -0
  163. package/lib/style/css/mixins/placeholder.less +17 -0
  164. package/lib/style/css/mixins/reset.less +27 -0
  165. package/lib/style/css/mixins/sizings.less +21 -0
  166. package/lib/style/css/mixins/spinner.less +30 -0
  167. package/lib/style/css/mixins/table.less +26 -0
  168. package/lib/style/css/mixins/tabs.less +4 -0
  169. package/lib/style/css/mixins/text.less +5 -0
  170. package/lib/style/css/print/print.less +1 -4
  171. package/lib/style/css/rio-theme/alerts.less +23 -61
  172. package/lib/style/css/rio-theme/badges.less +16 -28
  173. package/lib/style/css/rio-theme/blockquote.less +14 -97
  174. package/lib/style/css/rio-theme/mixins/alerts.less +13 -1
  175. package/lib/style/css/shared/colors.json +1 -1
  176. package/lib/style/css/shared/colors.less +11 -8
  177. package/lib/style/css/shared/text.less +6 -5
  178. package/lib/style/css/utils/responsive/grid.less +15 -6
  179. package/lib/style/css/variables.less +179 -0
  180. package/lib/style/fonts/rioglyph/rioglyph.less +1 -11
  181. package/lib/types.ts +38 -57
  182. package/lib/utils/buttonEffect.js +3 -1
  183. package/lib/utils/deviceUtils.js +40 -3
  184. package/lib/utils/init.js +22 -7
  185. package/lib/version.json +1 -1
  186. package/package.json +46 -30
@@ -1,3 +1,4 @@
1
+ // Color - Text
1
2
  @color-white: #ffffff;
2
3
  @color-black: #000000;
3
4
 
@@ -10,15 +11,17 @@
10
11
  @gray-lighter: #E5EBF0;
11
12
  @gray-lightest: #f6f8f9;
12
13
 
13
- // Color - Brand Colors
14
+ // Color - Brand
14
15
  @brand-primary: #30b4c0;
15
16
  @brand-secondary: #b23672;
17
+
18
+ // Color - Status
19
+ @brand-info: #4B80A6;
16
20
  @brand-success: #5cb85c;
17
21
  @brand-warning: #ff8e3c;
18
22
  @brand-danger: #d90000;
19
- @brand-info: #4B80A6;
20
23
 
21
- // Color - Driver Status
24
+ // Color - Driving Status
22
25
  @color-status-available: #239b7d;
23
26
  @color-status-driving: #3690ae;
24
27
  @color-status-resting: #626b72;
@@ -30,14 +33,14 @@
30
33
  @color-map-marker-geofence: #5a4876;
31
34
  @color-map-marker-route: #3690ae;
32
35
 
33
- // Color - Rating Status
36
+ // Color - Rating
34
37
  @color-rating-1: #d90000;
35
38
  @color-rating-2: #ff8e3c;
36
39
  @color-rating-3: #f8c575;
37
40
  @color-rating-4: #5cb85c;
38
41
  @color-rating-5: #4b924c;
39
42
 
40
- // Color - Custom highlight colors
43
+ // Color - Highlight
41
44
  @color-highlight-darkest: #114146; //darken(@brand-primary, 30%);
42
45
  @color-highlight-darker: #1c686e; //darken(@brand-primary, 20%);
43
46
  @color-highlight-dark: #268e97; //darken(@brand-primary, 10%);
@@ -47,7 +50,7 @@
47
50
  @color-highlight-lightest: #ebf9fa; //lighten(@brand-primary, 48%);
48
51
  @color-highlight-decent: #f3fbfc; //lighten(@brand-primary, 50%);
49
52
 
50
- // Color - Coldplay
53
+ // Color - RIO Coldplay
51
54
  @color-coldplay-wine:#520D4E;
52
55
  @color-coldplay-aubergine: #5a4876;
53
56
  @color-coldplay-kashmir:#536E8B;
@@ -58,7 +61,7 @@
58
61
  @color-coldplay-primrose: #C7E291;
59
62
  @color-coldplay-khaki: #F0EB83;
60
63
 
61
- // Color - Warmup
64
+ // Color - RIO Warmup
62
65
  @color-warmup-crimson: #31144F;
63
66
  @color-warmup-victoria: #493D6D;
64
67
  @color-warmup-cadillac: #7E3E72;
@@ -67,4 +70,4 @@
67
70
  @color-warmup-charm: #C9778D;
68
71
  @color-warmup-salmon: #F19588;
69
72
  @color-warmup-cherokee: #F5BB89;
70
- @color-warmup-corn: #FDE082;
73
+ @color-warmup-corn: #FDE082;
@@ -1,12 +1,13 @@
1
1
  // Fonts - Font Weights
2
- @text-thin: 200;
3
- @text-light: 300;
4
- @text-normal: 400;
5
- @text-medium: 600;
6
- @text-bold: 700;
2
+ @font-thin: 200;
3
+ @font-light: 300;
4
+ @font-normal: 400;
5
+ @font-medium: 600;
6
+ @font-bold: 700;
7
7
 
8
8
  // Fonts - Font Sizes
9
9
  @font-size-10: 10px;
10
+ @font-size-11: 11px;
10
11
  @font-size-12: 12px;
11
12
  @font-size-14: 14px;
12
13
  @font-size-16: 16px;
@@ -1,6 +1,15 @@
1
- /* Grid - Basics */
2
- .grid-template-columns-2@{suffix} { grid-template-columns: repeat(2, auto) !important }
3
- .grid-template-columns-3@{suffix} { grid-template-columns: repeat(3, auto) !important }
4
- .grid-template-columns-4@{suffix} { grid-template-columns: repeat(4, auto) !important }
5
- .grid-template-columns-5@{suffix} { grid-template-columns: repeat(5, auto) !important }
6
- .grid-template-columns-6@{suffix} { grid-template-columns: repeat(6, auto) !important }
1
+ /* Grid */
2
+ .grid-cols-1@{suffix} { grid-template-columns: repeat(1, minmax(0, 1fr)) !important }
3
+ .grid-cols-2@{suffix} { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
4
+ .grid-cols-3@{suffix} { grid-template-columns: repeat(3, minmax(0, 1fr)) !important }
5
+ .grid-cols-4@{suffix} { grid-template-columns: repeat(4, minmax(0, 1fr)) !important }
6
+ .grid-cols-5@{suffix} { grid-template-columns: repeat(5, minmax(0, 1fr)) !important }
7
+ .grid-cols-6@{suffix} { grid-template-columns: repeat(6, minmax(0, 1fr)) !important }
8
+ .grid-cols-7@{suffix} { grid-template-columns: repeat(7, minmax(0, 1fr)) !important }
9
+ .grid-cols-8@{suffix} { grid-template-columns: repeat(8, minmax(0, 1fr)) !important }
10
+ .grid-cols-9@{suffix} { grid-template-columns: repeat(9, minmax(0, 1fr)) !important }
11
+ .grid-cols-10@{suffix} { grid-template-columns: repeat(10, minmax(0, 1fr)) !important }
12
+ .grid-cols-11@{suffix} { grid-template-columns: repeat(11, minmax(0, 1fr)) !important }
13
+ .grid-cols-12@{suffix} { grid-template-columns: repeat(12, minmax(0, 1fr)) !important }
14
+
15
+ .grid-cols-none@{suffix} { grid-template-columns: none !important }
@@ -0,0 +1,179 @@
1
+ // RIO cdn
2
+ @cdnBase: "https://cdn.rio.cloud";
3
+ @fontBase: "fonts";
4
+
5
+ // Grid
6
+ @grid-columns: 12;
7
+ @grid-gutter-width: 20px;
8
+ @grid-gutter-height: 20px;
9
+ @grid-float-breakpoint: @screen-sm;
10
+
11
+ // Mapping // must match with the UIKIT demo values
12
+ @import (less) 'mapping/breakpoint-map.less';
13
+ @import (less) 'mapping/color-map.less';
14
+ @import (less) 'mapping/cols-map.less';
15
+ @import (less) 'mapping/numbers-map.less';
16
+ @import (less) 'mapping/positions-map.less';
17
+ @import (less) 'mapping/sizes-map.less';
18
+ @import (less) 'mapping/spacings-map.less';
19
+
20
+ // Screens
21
+ @import (less) "shared/screens.less";
22
+
23
+ @screen-xs-min: @screen-xs;
24
+ @screen-xs-max: (@screen-ls - 0.01);
25
+ @screen-ls-min: @screen-ls;
26
+ @screen-ls-max: (@screen-sm - 0.01);
27
+ @screen-sm-min: @screen-sm;
28
+ @screen-sm-max: (@screen-md - 0.01);
29
+ @screen-md-min: @screen-md;
30
+ @screen-md-max: (@screen-lg - 0.01);
31
+ @screen-lg-min: @screen-lg;
32
+ @screen-lg-max: (@screen-xl - 0.01);
33
+ @screen-xl-min: @screen-xl;
34
+ @screen-xl-max: 10000px;
35
+
36
+ // Container
37
+ @container-ls: @screen-ls - (@grid-gutter-width * 2);
38
+ @container-sm: @screen-sm - (@grid-gutter-width * 2);
39
+ @container-md: @screen-md - (@grid-gutter-width * 2);
40
+ @container-lg: @screen-lg - (@grid-gutter-width * 2);
41
+ @container-xl: @screen-xl - (@grid-gutter-width * 2);
42
+
43
+ // Container Fluid
44
+ // @container-fluid-xs: px;
45
+ @container-fluid-sm: 980px;
46
+ @container-fluid-md: 1280px;
47
+ @container-fluid-lg: 1440px;
48
+ @container-fluid-xl: 1680px;
49
+ @container-fluid-xxl: 1920px;
50
+
51
+ // Padding
52
+ @padding-xs-vertical: 1px;
53
+ @padding-xs-horizontal: 5px;
54
+ @padding-sm-vertical: 5px;
55
+ @padding-sm-horizontal: 10px;
56
+ @padding-default-vertical: 6px;
57
+ @padding-default-horizontal: 12px;
58
+ @padding-lg-vertical: 10px;
59
+ @padding-lg-horizontal: 16px;
60
+
61
+ // Border Radius
62
+ @border-radius-xs: 2px;
63
+ @border-radius-sm: 3px;
64
+ @border-radius-default: 4px;
65
+ @border-radius-lg: 6px;
66
+ @border-radius-xl: 8px;
67
+ @border-radius-round: 1000px;
68
+
69
+ // Colors
70
+ @import (less) "shared/colors.less";
71
+
72
+ // Build Warmup and Coldplay Colors?
73
+ @buildColdplayColors: true;
74
+ @buildWarmupColors: true;
75
+
76
+ // Color - Brand Decent
77
+ @brand-primary-decent: #f4fbfc;
78
+ @brand-secondary-decent: #fbf5f8;
79
+
80
+ // Color - Status Decent
81
+ @brand-info-decent: #f5f8fb;
82
+ @brand-success-decent: #f6fbf5;
83
+ @brand-warning-decent: #fdf5f0;
84
+ @brand-danger-decent: #fdf3f3;
85
+
86
+ // Button Sizes
87
+ @btn-size-xs: 22px;
88
+ @btn-size-sm: 30px;
89
+ @btn-size-default: 34px;
90
+ @btn-size-lg: 45px;
91
+
92
+ // Text
93
+ @import (less) "shared/text.less";
94
+
95
+ // Text - Sizes
96
+ @font-size-xs: @font-size-12; // only used in buttons and 10px is too small
97
+ @font-size-sm: @font-size-12;
98
+ @font-size-default: @font-size-14;
99
+ @font-size-lg: @font-size-16;
100
+ @font-size-xl: 25px;
101
+ @font-size-xxl: 30px;
102
+
103
+ // Text - Headlines - Weights
104
+ @headings-font-family: @font-family-base;
105
+ @headings-font-weight: @font-medium;
106
+ @headings-line-height: 1.1;
107
+ @headings-color: inherit;
108
+
109
+ // Text - Line Heights
110
+ @line-height-xs: 1.5;
111
+ @line-height-sm: 1.5;
112
+ @line-height-default: 1.428571429;
113
+ @line-height-lg: 1.4;
114
+
115
+ // Text - Font Family
116
+ @font-family-base: 'Source Sans Pro', Helvetica, Arial, sans-serif;
117
+ @font-family-monospace: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
118
+ @font-family-ios: 'SF Text', 'Source Sans Pro', Helvetica, Arial, sans-serif;
119
+ @font-family-android: 'Roboto', 'Source Sans Pro', Helvetica, Arial, sans-serif;
120
+
121
+ @font-source-sans: true;
122
+ @font-man: false;
123
+ @font-redring: false;
124
+ @font-san-francisco: false;
125
+ @font-roboto: false;
126
+ @font-vw: false;
127
+
128
+ // Iconfont
129
+ @icon-font-name: "rioglyph";
130
+
131
+ // Variables
132
+ @text-color: @gray-darkest;
133
+ @link-color: @brand-primary;
134
+ @link-hover-color: darken(@brand-primary, 10%);
135
+
136
+ // Media Queries
137
+ @screen-xs-min: @screen-xs;
138
+ @screen-sm-min: @screen-sm;
139
+ @screen-md-min: @screen-md;
140
+ @screen-lg-min: @screen-lg;
141
+
142
+ // ApplicationLayout
143
+ @ApplicationLayoutBodyPadding: 30px;
144
+ @ApplicationLayoutNotResponsiveWidth: 900px;
145
+
146
+ @ApplicationLayoutBodyHeight: 100vh; // --vh fallback
147
+ @ApplicationLayoutBodyHeightAndViewportFix: ~'calc(var(--vh, 1vh) * 100)';
148
+
149
+ @ApplicationLayoutBodyHeightWithoutHeader: ~'calc(100vh - @{navbar-height})'; // --vh fallback
150
+ @ApplicationLayoutBodyHeightWithoutHeaderAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height})';
151
+
152
+ @ApplicationLayoutBodyHeightWithoutFooter: ~'calc(100vh - (@{footer-height}))'; // --vh fallback
153
+ @ApplicationLayoutBodyHeightWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (@{footer-height}))';
154
+
155
+ @ApplicationLayoutBodyHeightWithoutHeaderWithoutFooter: ~'calc(100vh - (@{navbar-height} + @{footer-height}))'; // --vh fallback
156
+ @ApplicationLayoutBodyHeightWithoutHeaderWithoutFooterAndViewportFix: ~'calc(var(--vh, 1vh) * 100 - (@{navbar-height} + @{footer-height}))';
157
+
158
+ // ApplicationHeader
159
+ @navbar-height: 50px;
160
+ @navbar-brand-home-icon: url('https://cdn.rio.cloud/svg/common/ico_home.svg');
161
+ @navbar-brand-icon: url('https://cdn.rio.cloud/svg/common/ico_rio_colored.svg');
162
+ @navbar-height-without-border: @navbar-height - 1;
163
+ @navbar-padding-horizontal: @grid-gutter-width;
164
+ @navbar-padding-vertical: 15px;
165
+
166
+ // ApplicationFooter
167
+ @footer-height: @btn-size-lg + 9px;
168
+
169
+ // Z-index
170
+ @zindex-tooltip: 1060;
171
+ @zindex-modal: 1050;
172
+ @zindex-modal-background: 1040;
173
+ @zindex-popover: 1010;
174
+ @zindex-navbar: 1000;
175
+ @zindex-dropdown: 1000;
176
+ @zindex-sidebar: 990;
177
+ @zindex-tooltip-onboarding: 990;
178
+ @zindex-map-marker-hover: 801;
179
+ @zindex-map-marker-active: 800;
@@ -2,7 +2,7 @@
2
2
 
3
3
  @font-face {
4
4
  font-family: "rioglyph";
5
- src: url("rioglyph.woff?ba8bd07543018852f7e4656713b8ca72") format("woff");
5
+ src: url("rioglyph.woff?4f89ef51d7bec2188389c1c1ee44ac59") format("woff");
6
6
  font-weight: normal;
7
7
  font-style: normal;
8
8
  }
@@ -24,16 +24,6 @@
24
24
  -moz-osx-font-smoothing: grayscale;
25
25
  }
26
26
 
27
- .rioglyph.spinning:before {
28
- display: inline-block;
29
- animation: spinning 1s linear infinite;
30
- }
31
-
32
- @keyframes spinning {
33
- from { transform: rotate(0deg) }
34
- to { transform: rotate(359deg) }
35
- }
36
-
37
27
  @rioglyph-addressbook: "\f16b";
38
28
  .rioglyph-addressbook:before,
39
29
  .hover-rioglyph-addressbook:hover:before {
package/lib/types.ts CHANGED
@@ -505,6 +505,8 @@ export interface DatePickerProps extends DatetimepickerProps {
505
505
  clearableInput?: boolean;
506
506
  minWidth?: number;
507
507
  onChange?: (value: Moment | string) => void;
508
+ mandatory?: boolean;
509
+ dateValidation?: (date: Date | string | Moment) => boolean;
508
510
  }
509
511
 
510
512
  export interface DateRangePickerCustomPresets {
@@ -696,7 +698,20 @@ export interface Line {
696
698
  dataUnit?: string;
697
699
  strokeColor: string;
698
700
  legendType: 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye';
699
- type: 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function;
701
+ type:
702
+ | 'basis'
703
+ | 'basisClosed'
704
+ | 'basisOpen'
705
+ | 'linear'
706
+ | 'linearClosed'
707
+ | 'natural'
708
+ | 'monotoneX'
709
+ | 'monotoneY'
710
+ | 'monotone'
711
+ | 'step'
712
+ | 'stepBefore'
713
+ | 'stepAfter'
714
+ | Function;
700
715
  isAnimationActive?: boolean;
701
716
  onClick?: Function;
702
717
  }
@@ -723,12 +738,14 @@ export interface ListMenuItems {
723
738
  group?: string | React.ReactNode;
724
739
  groupNavItem?: React.ReactNode;
725
740
  navItems: NavItems[];
741
+ isSubItem?: boolean;
726
742
  }
727
743
 
728
744
  export interface ListMenuProps {
729
745
  menuItems: ListMenuItems[];
730
746
  enableFilter?: boolean;
731
747
  focusFilter?: boolean;
748
+ filterKey?: string;
732
749
  filterPlaceholder?: string;
733
750
  notFoundMessage?: string | React.ReactNode;
734
751
  groupClassName?: string;
@@ -1016,7 +1033,7 @@ export interface NotBookedStateProps {
1016
1033
  headline: string | React.ReactNode;
1017
1034
  message: string | React.ReactNode;
1018
1035
  buttons?: object[];
1019
- features?: Array<React.ReactNode>;
1036
+ features?: React.ReactNode[];
1020
1037
  condensed?: boolean;
1021
1038
  fullWidth?: boolean;
1022
1039
  image?: React.ReactNode;
@@ -1126,7 +1143,7 @@ export interface OnboardingTipProps {
1126
1143
  children?: any;
1127
1144
  width?: tooltipWidth;
1128
1145
  preventOverflow?: boolean;
1129
- popperConfig?: any;
1146
+ popperConfig?: object;
1130
1147
  }
1131
1148
 
1132
1149
  interface delayProp {
@@ -1286,7 +1303,7 @@ export interface ReleaseNotesProps {
1286
1303
  releaseNotes: {
1287
1304
  [key: string]: {
1288
1305
  date: string;
1289
- content: Array<HTMLElement | React.ReactElement>;
1306
+ content: (HTMLElement | React.ReactElement)[];
1290
1307
  };
1291
1308
  };
1292
1309
  }
@@ -1300,7 +1317,7 @@ export interface ReleaseNotesDialogProps {
1300
1317
  translatedReleaseNotes: {
1301
1318
  [key: string]: {
1302
1319
  date: string;
1303
- content: Array<HTMLElement | React.ReactElement>;
1320
+ content: (HTMLElement | React.ReactElement)[];
1304
1321
  };
1305
1322
  };
1306
1323
  currentVersion: string;
@@ -1475,6 +1492,7 @@ export interface SimpleButtonDropdownProps {
1475
1492
  onOpen?: Function;
1476
1493
  onClose?: Function;
1477
1494
  customDropdown?: React.ReactNode;
1495
+ popperConfig?: object;
1478
1496
  }
1479
1497
 
1480
1498
  export interface SimpleClusterLayerProps {
@@ -1603,18 +1621,6 @@ export interface SpinnerProps {
1603
1621
  text?: string;
1604
1622
  }
1605
1623
 
1606
- export interface SingleMapMarkerProps {
1607
- bearing?: number;
1608
- name?: string | React.ReactNode;
1609
- warningCount?: number;
1610
- exceptionCount?: number;
1611
- active?: boolean;
1612
- clickable?: boolean;
1613
- moving?: boolean;
1614
- iconNames?: string[];
1615
- markerColor?: markerColor;
1616
- }
1617
-
1618
1624
  export enum SortDirection {
1619
1625
  ASCENDING = 'asc',
1620
1626
  DESCENDING = 'desc',
@@ -2004,10 +2010,7 @@ export interface TypeCounterProps {
2004
2010
 
2005
2011
  // U --------------------------------------------------------------------------------------------------
2006
2012
 
2007
- export type UseAfterMount = (
2008
- callback: () => void,
2009
- deps?: any[]
2010
- ) => void;
2013
+ export type UseAfterMount = (callback: () => void, deps?: any[]) => void;
2011
2014
 
2012
2015
  export type UseClickOutside<T extends HTMLElement = any> = (
2013
2016
  callback: () => void,
@@ -2025,19 +2028,15 @@ export type UseDebugInfo = (
2025
2028
  componentName: string,
2026
2029
  props: object
2027
2030
  ) => {
2028
- count: number,
2029
- changedProps: any,
2030
- timeSinceLastRender: number,
2031
- lastRenderTimestamp: number,
2031
+ count: number;
2032
+ changedProps: any;
2033
+ timeSinceLastRender: number;
2034
+ lastRenderTimestamp: number;
2032
2035
  };
2033
2036
 
2034
- export type UseEffectOnce = (
2035
- callback: () => void
2036
- ) => void;
2037
+ export type UseEffectOnce = (callback: () => void) => void;
2037
2038
 
2038
- export type UseElementSize = (
2039
- elementRef: { current: Element; }
2040
- ) => [number, number];
2039
+ export type UseElementSize = (elementRef: { current: Element }) => [number, number];
2041
2040
 
2042
2041
  export type UseEsc<T extends keyof WindowEventMap> = (callback: (event: WindowEventMap[T]) => any) => void;
2043
2042
 
@@ -2048,10 +2047,7 @@ export type UseEvent<T extends keyof WindowEventMap> = (
2048
2047
  target?: HTMLElement
2049
2048
  ) => void;
2050
2049
 
2051
- export type UseInterval = (
2052
- callback: () => void,
2053
- delay?: number
2054
- ) => React.MutableRefObject<object>;
2050
+ export type UseInterval = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
2055
2051
 
2056
2052
  export type UseKey<T extends keyof WindowEventMap> = (
2057
2053
  callback: (event: WindowEventMap[T]) => any,
@@ -2064,34 +2060,19 @@ export type UseOnlineStatus = () => boolean;
2064
2060
  export type UseOnScreen = (
2065
2061
  ref: React.MutableRefObject<object>,
2066
2062
  options?: {
2067
- rootMargins?: string,
2068
- threshold?: number | number[]
2063
+ rootMargins?: string;
2064
+ threshold?: number | number[];
2069
2065
  }
2070
2066
  ) => boolean;
2071
2067
 
2072
2068
  export type UseRenderCount = () => number;
2073
2069
 
2074
- export type UseStateWithValidation = (
2075
- validationFn: Function,
2076
- initialValue: any
2077
- ) => [any, Function, boolean];
2070
+ export type UseStateWithValidation = (validationFn: Function, initialValue: any) => [any, Function, boolean];
2078
2071
 
2079
- export type UseLocalStorage = (
2080
- key: string,
2081
- defaultValue: any
2082
- ) => [any, Function, Function];
2072
+ export type UseLocalStorage = (key: string, defaultValue: any) => [any, Function, Function];
2083
2073
 
2084
- export type UseSessionStorage = (
2085
- key: string,
2086
- defaultValue: any
2087
- ) => [any, Function, Function];
2074
+ export type UseSessionStorage = (key: string, defaultValue: any) => [any, Function, Function];
2088
2075
 
2089
- export type UseTimeout = (
2090
- callback: () => void,
2091
- delay?: number
2092
- ) => React.MutableRefObject<object>;
2076
+ export type UseTimeout = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
2093
2077
 
2094
- export type UseWindowResize = (
2095
- callback: () => void,
2096
- timeout?: number
2097
- ) => void;
2078
+ export type UseWindowResize = (callback: () => void, timeout?: number) => void;
@@ -41,8 +41,10 @@ var isTargetEligibleForEffect = function isTargetEligibleForEffect(target) {
41
41
  if (typeof className === 'string' || typeof className === 'array') {
42
42
  var isButton = className.includes('btn ');
43
43
  var isNotButtonComponent = !className.includes('btn-component');
44
+ var isNotLinkButton = !className.includes('btn-link');
45
+ var isNotActionButton = !className.includes('btn-action');
44
46
  var isNotDisabled = !className.includes('disabled');
45
- return isButton && isNotButtonComponent && isNotDisabled;
47
+ return isButton && isNotButtonComponent && isNotDisabled && isNotLinkButton && isNotActionButton;
46
48
  }
47
49
 
48
50
  return false;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.isDesktop = exports.inIframe = exports.hasTouch = void 0;
6
+ exports.toggleZoomOnMobile = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = void 0;
7
7
 
8
8
  // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not, we need to
9
9
  // use old shool require() to have a conditional import only when html really exists. This avoids issues when
@@ -38,6 +38,12 @@ var hasTouch = function hasTouch() {
38
38
 
39
39
  exports.hasTouch = hasTouch;
40
40
 
41
+ var isMobile = function isMobile() {
42
+ return document && document.documentElement.classList.contains('ua-mobile');
43
+ };
44
+
45
+ exports.isMobile = isMobile;
46
+
41
47
  var isDesktop = function isDesktop() {
42
48
  return document && document.documentElement.classList.contains('ua-desktop');
43
49
  };
@@ -47,9 +53,40 @@ exports.isDesktop = isDesktop;
47
53
  var inIframe = function inIframe() {
48
54
  try {
49
55
  return window.self !== window.top;
50
- } catch (e) {
56
+ } catch (_) {
51
57
  return true;
52
58
  }
59
+ }; // Disables the Zoom for the mobile devices.
60
+ // This is not good for accessibility but makes the webpage feel more like a native app.
61
+ // <meta name="viewport" content="user-scalable=0 ..." />
62
+
63
+
64
+ exports.inIframe = inIframe;
65
+ var USER_SCALABLE = 'user-scalable=0 maximum-scale=1';
66
+
67
+ var toggleZoomOnMobile = function toggleZoomOnMobile() {
68
+ if (!document) {
69
+ return;
70
+ }
71
+
72
+ var viewportMeta = document.head.querySelector('[name="viewport"]');
73
+
74
+ if (!viewportMeta) {
75
+ return;
76
+ }
77
+
78
+ var isScalable = viewportMeta.content.includes(USER_SCALABLE); // Restrict the zoom for mobile if not yet set
79
+
80
+ if (isMobile() && !isScalable) {
81
+ viewportMeta.content += " ".concat(USER_SCALABLE);
82
+ return;
83
+ } // Remove the setting, for non mobile cases
84
+
85
+
86
+ if (!isMobile() && isScalable) {
87
+ viewportMeta.content = viewportMeta.content.replace(USER_SCALABLE, '').trim();
88
+ return;
89
+ }
53
90
  };
54
91
 
55
- exports.inIframe = inIframe;
92
+ exports.toggleZoomOnMobile = toggleZoomOnMobile;
package/lib/utils/init.js CHANGED
@@ -23,6 +23,16 @@ var uikitVersion = _version.default.version;
23
23
 
24
24
  var isProdEnv = function isProdEnv() {
25
25
  return process.env.NODE_ENV === 'production';
26
+ };
27
+
28
+ var isTestEnv = function isTestEnv() {
29
+ return process.env.NODE_ENV === 'test';
30
+ };
31
+
32
+ var isLocalhost = function isLocalhost() {
33
+ var _window, _window$location;
34
+
35
+ return ((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) === 'localhost';
26
36
  }; // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
27
37
 
28
38
 
@@ -37,7 +47,7 @@ var logStyled = function logStyled(log) {
37
47
 
38
48
  var printPoweredByRIO = function printPoweredByRIO() {
39
49
  logStyled('- - - - - - - - - - - - - - - - - - - - - - -');
40
- logStyled(" ____ ___ ___ _ _ ___ _ _____ _____\n | _ \\|_ _/ _ \\ | | | |_ _| |/ /_ _|_ _|\n | |_) || | | | | | | | || || ' / | | | |\n | _ < | | |_| | | |_| || || . \\ | | | |\n |_| \\_\\___\\___/ \\___/|___|_|\\_\\___| |_|\n");
50
+ !isLocalhost() && logStyled(" ____ ___ ___ _ _ ___ _ _____ _____\n | _ \\|_ _/ _ \\ | | | |_ _| |/ /_ _|_ _|\n | |_) || | | | | | | | || || ' / | | | |\n | _ < | | |_| | | |_| || || . \\ | | | |\n |_| \\_\\___\\___/ \\___/|___|_|\\_\\___| |_|\n");
41
51
  var message = [" Version ".concat(uikitVersion, " | https://uikit.developers.rio.cloud")];
42
52
  isProdEnv() && message.push('\n\n You are a Developer? RIO is hiring! | https://rio.cloud/en/career');
43
53
  logStyled(message.join(''));
@@ -124,8 +134,11 @@ var initDocumentBootstrapping = function initDocumentBootstrapping(document) {
124
134
  return;
125
135
  }
126
136
 
127
- console.group('UIKIT');
128
- console.log('Init document bootstrapping');
137
+ if (!isTestEnv()) {
138
+ console.group('UIKIT');
139
+ console.log('Init document bootstrapping');
140
+ }
141
+
129
142
  var html = document.documentElement;
130
143
 
131
144
  var setViewportUnits = function setViewportUnits() {
@@ -144,10 +157,12 @@ var initDocumentBootstrapping = function initDocumentBootstrapping(document) {
144
157
  html.classList.add('window-iframe');
145
158
  }
146
159
 
147
- printPoweredByRIO();
148
- checkForReleaseVersion();
149
- checkMatchingUkitVersions();
150
- console.groupEnd('UIKIT');
160
+ if (!isTestEnv()) {
161
+ printPoweredByRIO();
162
+ checkForReleaseVersion();
163
+ checkMatchingUkitVersions();
164
+ console.groupEnd('UIKIT');
165
+ }
151
166
  };
152
167
 
153
168
  exports.initDocumentBootstrapping = initDocumentBootstrapping;
package/lib/version.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "version": "0.15.1"
2
+ "version": "0.16.0-beta-1"
3
3
  }