@rio-cloud/rio-uikit 0.15.0-beta-49 → 0.16.0-beta-1

package/lib/components/numberControl/NumberControl.js

@@ -179,12 +179,16 @@ var NumberControl = function NumberControl(props) {
   }, unit), /*#__PURE__*/_react.default.createElement("div", {
     onMouseDown: handleMouseDownOnDecrement,
     onMouseUp: handleStopHolding,
+    role: 'button',
+    "aria-label": 'decrement-button',
     className: 'decrementButton text-color-gray hover-text-color-dark'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'rioglyph rioglyph-minus scale-90'
   })), /*#__PURE__*/_react.default.createElement("div", {
     onMouseDown: handleMouseDownOnIncrement,
     onMouseUp: handleStopHolding,
+    role: 'button',
+    "aria-label": 'increment-button',
     className: 'incrementButton text-color-gray hover-text-color-dark margin-left-5'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'rioglyph rioglyph-plus scale-90'

package/lib/components/numberInput/NumberInput.js

@@ -45,18 +45,18 @@ var getValueFromProps = function getValueFromProps(val, min, max, fallback) {
   return clampNumber(Number(val), min, max) || fallback;
 };
 
-var clampNumber = function clampNumber(number, min, max) {
-  if (number < min) {
+var clampNumber = function clampNumber(value, min, max) {
+  if (value < min) {
     return min;
-  } else if (number > max) {
+  } else if (value > max) {
     return max;
   }
 
-  return number;
+  return value;
 };
 
-var isFormatted = function isFormatted(number) {
-  return /^(-)?([1-9]\d*)?$/.test(number) || number === '0';
+var isFormatted = function isFormatted(value) {
+  return /^(-)?([1-9]\d*)?$/.test(value) || value === '0';
 };
 
 var convertNonIntegerToDefault = function convertNonIntegerToDefault(value, min) {
@@ -111,8 +111,6 @@ var NumberInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [propValue, clampNumber]);
 
   var applyValue = function applyValue(newValue) {
-    console.log(newValue);
-
     if (isFormatted(newValue)) {
       if (newValue === '-' || newValue === '') {
         setState({
@@ -123,13 +121,14 @@ var NumberInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       } else {
         var enteredValue = Number(newValue);
         var isValid = enteredValue >= min && enteredValue <= max;
-        var newValidValue = clampNumber(enteredValue);
+        var newValidValue = clampNumber(enteredValue, min, max);
         setState({
           value: newValidValue,
           enteredValue: enteredValue,
           isValid: isValid
-        });
-        onValueChanged(newValidValue);
+        }); // Only call back the caller for valid values
+
+        isValid && onValueChanged(newValidValue);
       }
     }
   };
@@ -139,6 +138,7 @@ var NumberInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
 
   var handleBlur = function handleBlur(event) {
+    // console.log({enteredValue: state.enteredValue, event: Number(event.target.value)});
     // When the vales is removed, keep the input empty but trigger the onValueChanged callback
     // since the user has finished his input
     var lastEnteredValue = state.enteredValue;
@@ -146,29 +146,30 @@ var NumberInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (lastEnteredValue === '') {
       onValueChanged(lastEnteredValue);
       return;
-    } // Otherwise, validate the last input and calmp it if the entered value exeeds the limitations
+    } // Otherwise, validate the input and calmp it if the entered value exeeds the limitations
 
 
-    if (Number(lastEnteredValue) !== Number(event.target.value)) {
-      var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), min);
-      var validNumber = clampNumber(convertedEnteredValue);
-      applyValue(validNumber);
-    }
+    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), min);
+    var validNumber = clampNumber(convertedEnteredValue, min, max);
+    applyValue(validNumber);
   };
 
   var inputGroupClassNames = (0, _classnames.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
   var inputClassNames = (0, _classnames.default)('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
 
-  var input = /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+  var input = /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, remainingProps, {
     type: type,
     step: step,
+    min: min,
+    max: max,
     value: state.isValid ? state.value : state.enteredValue,
     className: inputClassNames,
     disabled: disabled,
     onBlur: handleBlur,
     onChange: handleOnChange,
-    ref: ref
-  }, remainingProps));
+    ref: ref,
+    "aria-label": 'number-input'
+  }));
 
   return unit || inputAddon ? /*#__PURE__*/_react.default.createElement("div", {
     className: inputGroupClassNames

package/lib/components/onboarding/OnboardingTip.js

@@ -37,7 +37,7 @@ function OnboardingTip(props) {
       width = props.width,
       preventOverflow = props.preventOverflow,
       popperConfig = props.popperConfig;
-  var tooltipWrapperClasses = (0, _classnames.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow' //clickflowBackdrop && 'onboarding-clickflow-backdrop'
+  var tooltipWrapperClasses = (0, _classnames.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow' // clickflowBackdrop && 'onboarding-clickflow-backdrop'
   );
 
   var overlay = /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -49,20 +49,20 @@ function OnboardingTip(props) {
     textAlignment: textAlignment,
     allowOnTouch: true
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'display-flex'
+    className: "display-flex"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'display-flex flex-column flex-1-1'
+    className: "display-flex flex-column flex-1-1"
   }, title && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'tooltip-title'
+    className: "tooltip-title"
   }, title), content && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'tooltip-content'
+    className: "tooltip-content"
   }, content)), showCloseIcon && /*#__PURE__*/_react.default.createElement("span", {
-    className: 'tooltip-close rioglyph rioglyph-remove'
+    className: "tooltip-close rioglyph rioglyph-remove"
   })));
 
   var trigger = /*#__PURE__*/_react.default.createElement(_OverlayTrigger.default, {
     placement: placement,
-    trigger: 'click',
+    trigger: "click",
     overlay: overlay,
     delayShow: DELAY_SHOW,
     delayHide: DELAY_HIDE,
@@ -113,7 +113,7 @@ OnboardingTip.defaultProps = {
   useInDialog: false,
   className: '',
   clickflow: false,
-  //clickflowBackdrop: false,
+  // clickflowBackdrop: false,
   placement: OnboardingTip.BOTTOM,
   width: null,
   preventOverflow: true
@@ -129,7 +129,7 @@ OnboardingTip.propTypes = {
   content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   className: _propTypes.default.string,
   clickflow: _propTypes.default.bool,
-  //clickflowBackdrop: PropTypes.bool,
+  // clickflowBackdrop: PropTypes.bool,
   placement: OnboardingTipPlacementType,
   width: _propTypes.default.oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500]),
   preventOverflow: _propTypes.default.bool,

package/lib/components/states/NotBookedState.js

@@ -29,9 +29,9 @@ var NotBookedState = function NotBookedState(props) {
       remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var combinedMessages = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'text-medium margin-bottom-20'
+    className: "text-medium margin-bottom-20"
   }, message), features && (0, _isArray.default)(features) && !(0, _isEmpty.default)(features) && /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'feature-list'
+    className: "feature-list"
   }, features.map(function (feature, index) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index

package/lib/components/table/TableSettingsDialogFooter.js

@@ -34,7 +34,7 @@ var TableSettingsDialogFooter = function TableSettingsDialogFooter(props) {
     className: restButtonClassNames,
     onClick: onResetColumnChanges
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-revert text-size-small margin-right-10'
+    className: 'rioglyph rioglyph-revert text-size-xs margin-right-10'
   }), resetButtonText), isResetAll && /*#__PURE__*/_react.default.createElement("div", {
     className: 'btn-group'
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/teaser/Teaser.js

@@ -146,7 +146,7 @@ var Teaser = /*#__PURE__*/function (_Component) {
     key: "renderFooter",
     value: function renderFooter(footer) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: 'teaser-footer-wrapper'
+        className: "teaser-footer-wrapper"
       }, footer);
     }
   }, {

package/lib/components/teaser/TeaserContainer.js

@@ -16,30 +16,30 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var getCridClasses = function getCridClasses(amount) {
   switch (amount) {
     case 1:
-      return 'col-xs-12';
+      return 'col-12';
 
     case 2:
-      return 'col-xs-12 col-sm-6';
+      return 'col-12 col-sm-6';
 
     case 3:
-      return 'col-xs-12 col-md-4';
+      return 'col-12 col-md-4';
 
     case 4:
-      return 'col-xs-12 col-md-6 col-lg-3';
+      return 'col-12 col-md-6 col-lg-3';
 
     case 6:
-      return 'col-xs-12 col-sm-4 col-lg-2';
+      return 'col-12 col-sm-4 col-lg-2';
 
     case 12:
-      return 'col-xs-12 col-sm-1';
+      return 'col-12 col-sm-1';
 
     default:
-      return 'col-xs-12';
+      return 'col-12';
   }
 };
 
 var TeaserContainer = function TeaserContainer(props) {
-  var rowClassNames = (0, _classnames.default)('teaser-container', 'row', 'flex-sm flex-wrap-sm', props.className && props.className);
+  var rowClassNames = (0, _classnames.default)('teaser-container', 'row', 'display-flex-sm flex-wrap-sm', props.className && props.className);
   var columnClassNames;
 
   if (props.teaserPerRow) {

package/lib/components/tooltip/Tooltip.js

@@ -49,7 +49,7 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // react-transition library would throw an error on mobile
     // when triggering a browser reflow and accessing the node directly.
     return /*#__PURE__*/_react.default.createElement("span", {
-      className: 'display-none'
+      className: "display-none"
     });
   }
 
@@ -59,7 +59,7 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var innerClasses = (0, _classnames.default)('tooltip-inner', textAlignment && "text-".concat(textAlignment), width && "width-".concat(width));
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
-    role: 'tooltip' // x-placement is used by the css to define how to position the arrow.
+    role: "tooltip" // x-placement is used by the css to define how to position the arrow.
     ,
     "x-placement": placement,
     ref: ref,
@@ -67,7 +67,7 @@ var Tooltip = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     style: outerStyle,
     "data-offset": 40
   }), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: 'tooltip-arrow'
+    className: "tooltip-arrow"
   }, arrowProps)), /*#__PURE__*/_react.default.createElement("div", {
     className: innerClasses
   }, children));
@@ -80,7 +80,7 @@ Tooltip.defaultProps = {
   className: '',
   textAlignment: 'center',
   tooltipStyle: Tooltip.STYLE_DEFAULT,
-  width: null,
+  width: 'auto',
   allowOnTouch: false
 };
 Tooltip.AUTO_START = _OverlayTrigger.default.AUTO_START;

package/lib/components/tooltip/Tooltip.less

@@ -6,16 +6,6 @@
 @tooltip-opacity: 1;
 
 .tooltip {
-  // IE11 Hacks
-  @media all and (-ms-high-contrast: none) {
-    .display-flex.flex-column {
-      display: block !important;
-    }
-
-    .tooltip-close {
-      display: none !important;
-    }
-  }
   .tooltip-arrow {
     position: absolute;
     width: 0;

package/lib/es/DeviceUtils.d.ts

@@ -1,5 +1,7 @@
 declare module '@rio-cloud/rio-uikit/lib/es/DeviceUtils' {
     export function hasTouch(): boolean;
-    export function hasTouch(): boolean;
-    export function hasTouch(): boolean;
+    export function isDesktop(): boolean;
+    export function isMobile(): boolean;
+    export function inIframe(): boolean;
+    export function toggleZoomOnMobile(): boolean;
 }

package/lib/es/SortDirection.d.ts

@@ -1,4 +1,9 @@
 declare module '@rio-cloud/rio-uikit/lib/es/SortDirection' {
+    export enum SortDirectionEnum {
+        ASCENDING = 'asc',
+        DESCENDING = 'desc',
+    }
+    
     export default {
         ASCENDING: 'asc',
         DESCENDING: 'desc',

package/lib/es/deviceUtils.js

@@ -21,5 +21,17 @@ Object.defineProperty(exports, "isDesktop", {
     return _deviceUtils.isDesktop;
   }
 });
+Object.defineProperty(exports, "isMobile", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.isMobile;
+  }
+});
+Object.defineProperty(exports, "toggleZoomOnMobile", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.toggleZoomOnMobile;
+  }
+});
 
 var _deviceUtils = require("../utils/deviceUtils");

package/lib/hooks/useClipboard.js

@@ -46,8 +46,8 @@ function useClipboard() {
     if (!(0, _isNil.default)(navigator.clipboard)) {
       navigator.clipboard.writeText(valueToCopy).then(function () {
         return handleCopyResult(true);
-      }).catch(function (err) {
-        return setError(err);
+      }).catch(function (error) {
+        return setError(error);
       });
     } else {
       setError(new Error('useClipboard: navigator.clipboard is not supported'));

package/lib/style/css/_exports/man-uikit.less

@@ -1,8 +1,9 @@
-// RIO Theme // Core
+// Core
 @import (less) 'rio-uikit-core.less';
 
-// RIO Theme // Utility Classes
-.import-utilities(
+// Utility Classes
+@import (less) '../design/responsive/_imports.less';
+.import-reponsive(
   @default: true;
   @xs: true;
   @ls: true;
@@ -13,13 +14,14 @@
   @print: false;
 );
 
-// RIO Theme // Fonts
+// Fonts
 @font-man: true;
 
 // MAN font
 @font-family-base: MANEuropeLight, 'serif';
 @headings-font-family: MANEuropeCondensed, 'serif';
 
+// Colors
 @brand-primary: #303c49;
 @brand-info: #4b96d2;
 @brand-danger: #d90000;
@@ -41,4 +43,4 @@
 
 @color-map-marker-poi: @brand-info;
 
-@border-radius-base: 2px;
+@border-radius-default: 2px;

package/lib/style/css/_exports/rio-buyButton.less

@@ -1,63 +1,52 @@
-// Bootstrap // Variables
-@import (less) '../rio-theme/variables.less';
+// Variables
+@import (less) '../variables.less';
 
-// Bootstrap // Utilities Mixins
-@import (less) '../rio-theme/mixins/labels.less';
-@import (less) '../rio-theme/mixins/opacity.less';
-@import (less) '../rio-theme/mixins/responsive-visibility.less';
-@import (less) '../rio-theme/mixins/tab-focus.less';
+// Mapping
+@import (less) '../mapping/breakpoint-map.less';
+@import (less) '../mapping/color-map.less';
 
-// // Bootstrap // Components Mixins
-@import (less) '../rio-theme/mixins/buttons.less';
+// Mixins
+@import (less) '../mixins/_mixins.less';
 
-// Bootstrap // Reset and dependencies
-@import (less) '../rio-theme/normalize.less';
+// Normalize
+@import (less) '../design/normalize.less';
 
-// Bootstrap // Core CSS
-@import (less) '../rio-theme/buttons.less';
-@import (less) '../rio-theme/scaffolding.less';
+// Styles
+@import (less) '../design/buttons.less';
+@import (less) '../design/labels.less';
+@import (less) '../design/visibilty.less';
 
-// Bootstrap // Components
-@import (less) '../rio-theme/labels.less';
-
-// START RIO Theme without BS dependencies
-
-// RIO Theme // Mixins
-@import (less) '../rio-theme/mixins/spacings.less';
-@import (less) '../rio-theme/mixins/sizings.less';
-@import (less) '../rio-theme/mixins/spinner.less';
-
-// RIO Theme // Variables
-@import (less) '../rio-theme/colors.less';
-@import (less) '../rio-theme/screens.less';
-@import (less) '../shared/text.less';
-
-// RIO Theme // Fonts
+// Fonts
 @font-source-sans: true;
-@import (less) '../rio-theme/fonts.less';
+@import (less) '../design/fonts.less';
 
 // RIOglyph Iconfont
-@import (less) '../../fonts/rioglyph/rioglyph.less';
+@import (less) '../design/rioglyph.less';
 
-// RIO Theme // Components
-@import (less) '../rio-theme/theme.less';
+// Components
+@import (less) '../design/theme.less';
 
-// RIO Theme // Utils
-@import (less) '../utils/colors.less';
-@import (less) '../utils/text.less';
+// Utilities
+@import (less) '../design/colors.less';
+@import (less) '../design/text.less';
 
 // Screens - Breakpoints
 @screen-xs: 300px;
 @screen-ls: 300px;
 
 @suffix: ~'';
-@import (multiple) "../utils/responsive/display.less";
-@import (multiple) "../utils/responsive/flexbox.less";
-@import (multiple) "../utils/responsive/text.less";
-@import (less) '../rio-theme/responsive-utilities.less';
+@import (multiple) "../design/responsive/display.less";
+@import (multiple) "../design/responsive/flexgrid.less";
+@import (multiple) "../design/responsive/text.less";
 
 // Custom Styles
 
+.hidden-xs {
+  @media (max-width: @screen-xs) {
+    display: none !important;
+  }
+}
+
 .label {
   padding: 6px 10px;
 }