@rio-cloud/rio-uikit 0.16.0-beta-4 → 0.16.0

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

@@ -14,7 +14,7 @@
 // Styles
 @import (less) '../design/buttons.less';
 @import (less) '../design/labels.less';
-@import (less) '../design/visibilty.less';
+@import (less) '../design/visibility.less';
 
 // Fonts
 @font-source-sans: true;

package/lib/style/css/_exports/rio-uikit-core.less

@@ -33,7 +33,6 @@
 @import (less) '../design/type.less';
 @import (less) '../design/popovers.less';
 @import (less) '../design/utilities.less';
-@import (less) '../design/visibilty.less';
 @import (less) '../design/blockquote.less';
 @import (less) '../design/callouts.less';
 @import (less) '../design/container.less';
@@ -50,8 +49,10 @@
 @import (less) '../design/overflow.less';
 @import (less) '../design/position.less';
 @import (less) '../design/rounded.less';
+@import (less) '../design/sizing.less';
 @import (less) '../design/shadows.less';
 @import (less) '../design/text.less';
+@import (less) '../design/visibility.less';
 @import (less) '../design/z-index.less';
 
 // Theme
@@ -64,6 +65,9 @@
 // Animations
 @import (less) '../animations/_imports.less';
 
+// Filter
+@import (less) '../filter/_imports.less';
+
 // Print
 @import (less) '../print/print.less';
 

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

@@ -2084,7 +2084,7 @@ form[id*="contactForm"] {
 // Safari image fix
 @media not all and (min-resolution:.001dpcm) {
   @supports (-webkit-appearance:none) {
-    img[src*="placeholder_transparent"] {
+    img[src*="placeholder_transparent"]:not([style*="background-image"]) {
       opacity: 0;
     }
 
@@ -2097,7 +2097,6 @@ form[id*="contactForm"] {
 }
 
 // section clippig
-
 .section-wrapper {
   &[class*="clip-"]:after {
     content: "";

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

@@ -221,7 +221,7 @@
 
     > .navigationItem {
       height: 50px;
-      width: 50px;
+      width: auto;
 
       > .ActionBarItem {
         height: 50px;

package/lib/style/css/components/ApplicationHeader.less

@@ -266,7 +266,7 @@
       max-height: ~'calc(100vh - @{navbar-height} - 20px)'; // --vh fallback
       max-height: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height} - 20px)';
       max-width: calc(~'100% - 3px');
-      min-width: 100%;
+      width: 100%;
       overflow-x: hidden;
       overflow-y: auto;
 

package/lib/style/css/components/Tooltip.less

@@ -219,43 +219,4 @@
       margin-right: 10px;
     }
   }
-}
-
-// Tippy
-.tippy-touch {
-  cursor: pointer !important
-}
-
-.tippy-popper {
-  -webkit-perspective: 800px;
-  max-width: 400px;
-  outline: 0;
-  perspective: 800px;
-  pointer-events: none;
-  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
-  z-index: 9999;
-}
-
-.tippy-popper.html-template {
-  max-width: 96%;
-  max-width: calc(100% - 20px)
-}
-
-.tippy-tooltip {
-  position: relative;
-  color: #fff;
-  border-radius: 4px;
-  font-size: .95rem;
-  padding: .4rem .8rem;
-  text-align: center;
-  will-change: transform;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #333
-}
-
-.tippy-tooltip [x-arrow] {
-  position: absolute;
-  width: 0;
-  height: 0
 }

package/lib/style/css/design/responsive/_imports.less

@@ -12,7 +12,6 @@
   @import (multiple) "position.less";
   @import (multiple) "sizing.less";
   @import (multiple) "text.less";
-  @import (multiple) "visibility.less";
 }
 
 // RIO Theme // Utility Classes

package/lib/style/css/design/responsive/flexgrid.less

@@ -8,30 +8,30 @@
 .flex-nowrap@{suffix} { flex-wrap: nowrap !important }
 .flex-wrap-reverse@{suffix} { flex-wrap: wrap-reverse !important }
 
-.justify-content-start@{suffix} { justify-content: flex-start !important }
-.justify-content-end@{suffix} { justify-content: flex-end !important }
-.justify-content-center@{suffix} { justify-content: center !important }
-.justify-content-between@{suffix} { justify-content: space-between !important }
 .justify-content-around@{suffix} { justify-content: space-around !important }
+.justify-content-between@{suffix} { justify-content: space-between !important }
+.justify-content-center@{suffix} { justify-content: center !important }
+.justify-content-end@{suffix} { justify-content: flex-end !important }
+.justify-content-start@{suffix} { justify-content: flex-start !important }
 
-.align-items-start@{suffix} { align-items: flex-start !important }
-.align-items-end@{suffix} { align-items: flex-end !important }
-.align-items-center@{suffix} { align-items: center !important }
 .align-items-baseline@{suffix} { align-items: baseline !important }
+.align-items-center@{suffix} { align-items: center !important }
+.align-items-end@{suffix} { align-items: flex-end !important }
+.align-items-start@{suffix} { align-items: flex-start !important }
 .align-items-stretch@{suffix} { align-items: stretch !important }
 
-.align-content-start@{suffix} { align-content: flex-start !important }
-.align-content-end@{suffix} { align-content: flex-end !important }
-.align-content-center@{suffix} { align-content: center !important }
-.align-content-between@{suffix} { align-content: space-between !important }
 .align-content-around@{suffix} { align-content: space-around !important }
+.align-content-between@{suffix} { align-content: space-between !important }
+.align-content-center@{suffix} { align-content: center !important }
+.align-content-end@{suffix} { align-content: flex-end !important }
+.align-content-start@{suffix} { align-content: flex-start !important }
 .align-content-stretch@{suffix} { align-content: stretch !important }
 
 .align-self-auto@{suffix} { align-self: auto !important }
-.align-self-start@{suffix} { align-self: flex-start !important }
-.align-self-end@{suffix} { align-self: flex-end !important }
-.align-self-center@{suffix} { align-self: center !important }
 .align-self-baseline@{suffix} { align-self: baseline !important }
+.align-self-center@{suffix} { align-self: center !important }
+.align-self-end@{suffix} { align-self: flex-end !important }
+.align-self-start@{suffix} { align-self: flex-start !important }
 .align-self-stretch@{suffix} { align-self: stretch !important }
 
 /* Flexbox - Helper */

package/lib/style/css/design/responsive/position.less

@@ -6,14 +6,15 @@
 .position-sticky@{suffix} {
   position: sticky !important;
 
-  &.top-module-content {
-    @media (max-width: @screen-xs-max) {
-      top: -(@ApplicationLayoutBodyPadding*0.5);
-    }
-    @media (min-width: @screen-ls-min) {
-      top: -(@ApplicationLayoutBodyPadding);
-    }
-  }
+  // &.top-module-content {
+  //   @media (max-width: @screen-xs-max) {
+  //     top: -(@ApplicationLayoutBodyPadding*0.5);
+  //   }
+
+  //   @media (min-width: @screen-ls-min) {
+  //     top: -(@ApplicationLayoutBodyPadding);
+  //   }
+  // }
 }
 
 .top-0@{suffix} { top: 0 !important }

package/lib/style/css/design/responsive/sizing.less

@@ -94,22 +94,3 @@ each(@sizes-vw, {
 .sizing-vh(height; @suffix);
 .sizing-vh(min-height; @suffix);
 .sizing-vh(max-height; @suffix);
-
-// ApplicationLayout viewport height
-.ApplicationLayoutHeader@{suffix} {
-  ~ .ApplicationLayoutBody,
-  ~ .ApplicationLayoutSidebar {
-    .sizing-vh(height; @suffix; @navbar-height);
-    .sizing-vh(min-height; @suffix; @navbar-height);
-  }
-
-  ~ .ApplicationLayoutBody .module-content {
-    @media (max-width: @screen-ls) {
-      .sizing-vh(height; @suffix; @navbar-height + @ApplicationLayoutBodyPadding*0.5);
-    }
-
-    @media (min-width: @screen-ls) {
-      .sizing-vh(height; @suffix; @navbar-height + @ApplicationLayoutBodyPadding);
-    }
-  }
-}

package/lib/style/css/design/sizing.less

@@ -0,0 +1,18 @@
+// ApplicationLayout viewport height
+.ApplicationLayoutHeader {
+  ~ .ApplicationLayoutBody,
+  ~ .ApplicationLayoutSidebar {
+    .sizing-vh(height; ~''; @navbar-height);
+    .sizing-vh(min-height; ~''; @navbar-height);
+  }
+
+  ~ .ApplicationLayoutBody .module-content {
+    @media (max-width: @screen-xs) {
+      .sizing-vh(height; ~''; @navbar-height + @ApplicationLayoutBodyPadding*0.5);
+    }
+
+    @media (min-width: @screen-xs) {
+      .sizing-vh(height; ~''; @navbar-height + @ApplicationLayoutBodyPadding);
+    }
+  }
+}

package/lib/style/css/design/visibility.less

@@ -0,0 +1,186 @@
+.show {
+  display: block !important;
+  opacity: 1;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.hidden, .hide {
+  display: none !important;
+}
+
+html .hidden-empty:empty {
+  display: none !important;
+}
+
+.hidden-print {
+  @media print {
+    display: none !important;
+  }
+}
+
+.visible-print {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+
+  &-inline {
+    display: none !important;
+
+    @media print {
+      display: inline !important;
+    }
+  }
+}
+
+// visible only
+
+@media (min-width: @screen-ls-min) {
+  .visible-xs {
+    // "-ls" because UIKIT xs and UIKIT ls are the same
+    // but the website.css uses -ls as the mobile breakpoint
+    display: none !important;
+  }
+}
+
+.visible-ls {
+  @media (max-width: @screen-xs-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    display: none !important;
+  }
+}
+
+.visible-sm {
+  @media (max-width: @screen-ls-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-md-min) {
+    display: none !important;
+  }
+}
+
+.visible-md {
+  @media (max-width: @screen-sm-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    display: none !important;
+  }
+}
+
+.visible-lg {
+  @media (max-width: @screen-md-max) {
+    display: none !important;
+  }
+
+  @media (min-width: @screen-xl-min) {
+    display: none !important;
+  }
+}
+
+.visible-xl {
+  @media (max-width: @screen-xl-min) {
+    display: none !important;
+  }
+}
+
+// hidden only
+
+.hidden-xs {
+  // "-ls" because UIKIT xs and UIKIT ls are the same
+  // but the website.css uses -ls as the mobile breakpoint
+  @media (max-width: @screen-ls) {
+    display: none !important;
+  }
+}
+
+.hidden-ls {
+  @media (min-width: @screen-ls-min) and (max-width: @screen-ls-max) {
+    display: none !important;
+  }
+}
+
+.hidden-sm {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: none !important;
+  }
+}
+
+.hidden-md {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: none !important;
+  }
+}
+
+.hidden-lg {
+  @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
+    display: none !important;
+  }
+}
+
+.hidden-xl {
+  @media (min-width: @screen-xl) {
+    display: none !important;
+  }
+}
+
+// visible from
+
+.visible-min-ls {
+  @media (max-width: @screen-sm-min) {
+    display: none !important;
+  }
+}
+
+.visible-min-sm {
+  @media (max-width: @screen-md-min) {
+    display: none !important;
+  }
+}
+
+.visible-min-md {
+  @media (max-width: @screen-lg-min) {
+    display: none !important;
+  }
+}
+
+.visible-min-lg {
+  @media (max-width: @screen-xl-min) {
+    display: none !important;
+  }
+}
+
+// hidden from
+
+.hidden-min-ls {
+  @media (min-width: @screen-ls-min) {
+    display: none !important;
+  }
+}
+
+.hidden-min-sm {
+  @media (min-width: @screen-sm-min) {
+    display: none !important;
+  }
+}
+
+.hidden-min-md {
+  @media (min-width: @screen-md-min) {
+    display: none !important;
+  }
+}
+
+.hidden-min-lg {
+  @media (min-width: @screen-lg-min) {
+    display: none !important;
+  }
+}

package/lib/style/css/filter/_imports.less

@@ -0,0 +1 @@
+@import (less) "blur.less";

package/lib/style/css/filter/blur.less

@@ -0,0 +1,17 @@
+.blur {
+    &-0 { filter: blur(0) }
+    &-1 { filter: blur(1px) }
+    &-2 { filter: blur(2px) }
+    &-3 { filter: blur(3px) }
+    &-4 { filter: blur(4px) }
+    &-5 { filter: blur(5px) }
+    &-6 { filter: blur(6px) }
+    &-7 { filter: blur(7px) }
+    &-8 { filter: blur(8px) }
+    &-9 { filter: blur(9px) }
+    &-10 { filter: blur(10px) }
+    &-20 { filter: blur(20px) }
+    &-30 { filter: blur(30px) }
+    &-40 { filter: blur(40px) }
+    &-50 { filter: blur(50px) }
+}

package/lib/style/fonts/rioglyph/rioglyph.less

@@ -2,7 +2,7 @@
 
 @font-face {
 	font-family: "rioglyph";
-	src: url("rioglyph.woff?14b6680c6235c42a26bca0913e1eea27") format("woff");
+	src: url("rioglyph.woff?e23ee3a7ff7e24c90f6028227ebcb825") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -274,6 +274,11 @@
 .hover-rioglyph-cog:hover:before {
 	content: "\e96c";
 }
+@rioglyph-color-swatch: "\f18e";
+.rioglyph-color-swatch:before,
+.hover-rioglyph-color-swatch:hover:before {
+	content: "\f18e";
+}
 @rioglyph-comment: "\e111";
 .rioglyph-comment:before,
 .hover-rioglyph-comment:hover:before {
@@ -329,6 +334,11 @@
 .hover-rioglyph-csv:hover:before {
 	content: "\f155";
 }
+@rioglyph-currency-euro: "\f18f";
+.rioglyph-currency-euro:before,
+.hover-rioglyph-currency-euro:hover:before {
+	content: "\f18f";
+}
 @rioglyph-damages: "\f12a";
 .rioglyph-damages:before,
 .hover-rioglyph-damages:hover:before {

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.0-beta-4"
+"version": "0.16.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.0-beta-4",
+    "version": "0.16.0",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -44,8 +44,8 @@
         "@babel/preset-react": "^7.16.7",
         "@babel/runtime": "^7.16.7",
         "@svgr/webpack": "^6.2.1",
-        "@testing-library/react": "^12.1.2",
-        "@testing-library/user-event": "^13.5.0",
+        "@testing-library/react": "12.1.2",
+        "@testing-library/user-event": "13.5.0",
         "@types/jest": "^27.4.1",
         "@types/lodash": "^4.14.178",
         "@types/react": "^17.0.39",
@@ -132,10 +132,10 @@
         "natural-orderby": "2.0.3",
         "prop-types": "15.8.1",
         "react-bootstrap": "1.6.4",
-        "react-content-loader": "6.1.0",
+        "react-content-loader": "6.2.0",
         "react-datetime": "github:rio-cloud/react-datetime#v3.1.0-1-merged",
         "react-debounce-input": "3.2.5",
-        "react-dropzone": "12.0.4",
+        "react-dropzone": "12.0.5",
         "react-input-mask": "3.0.0-alpha.2",
         "react-motion": "0.5.2",
         "react-notifications": "1.7.3",