@rio-cloud/rio-uikit 0.16.1-beta.24 → 0.16.2-beta.2

package/lib/es/types.ts

@@ -588,7 +588,7 @@ export interface DomMarkerProps {
 
 export interface DropdownSubmenuProps {
     title?: string | React.ReactNode;
-    items?: MenuItemProps[];
+    items?: MenuItem[];
     disabled?: boolean;
     className?: string;
 }
@@ -769,15 +769,15 @@ export interface LineChartProps {
     tooltip?: ChartTooltip | boolean;
 }
 
-export interface ListMenuItems {
+export interface ListMenuItem {
     group?: string | React.ReactNode;
     groupNavItem?: React.ReactNode;
-    navItems: NavItems[];
+    navItems: NavItem[];
     isSubItem?: boolean;
 }
 
 export interface ListMenuProps {
-    menuItems: ListMenuItems[];
+    menuItems: ListMenuItem[];
     enableFilter?: boolean;
     focusFilter?: boolean;
     filterKey?: string;
@@ -808,7 +808,7 @@ export type markerColor =
     | 'bg-map-marker-geofence'
     | 'bg-map-marker-route';
 
-export interface MediaDialogMediaProps {
+export interface MediaDialogMedia {
     type: 'image' | 'video';
     src: string;
     title: string | React.ReactNode;
@@ -818,7 +818,7 @@ export interface MediaDialogMediaProps {
 }
 
 export interface MediaDialogProps extends BaseDialogProps {
-    media: MediaDialogMediaProps[];
+    media: MediaDialogMedia[];
     previousButtonText: string | React.ReactNode;
     previousButtonCallback?: Function;
     nextButtonText: string | React.ReactNode;
@@ -984,7 +984,7 @@ export interface MarkerLayerProps {
     clusterDissolvable?: boolean;
 }
 
-export interface MenuItemProps {
+export interface MenuItem {
     value?: string | React.ReactNode;
     disabled?: boolean;
     divider?: boolean;
@@ -1005,7 +1005,7 @@ interface MultiselectCounterMessage {
     many: string | React.ReactNode;
 }
 
-interface MultiselectOption {
+export interface MultiselectOption {
     id: string;
     label: string | React.ReactNode;
     selected?: boolean;
@@ -1023,7 +1023,7 @@ export interface MultiselectProps {
     pullRight?: boolean;
     autoDropDirection?: boolean;
     value?: [];
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     disabled?: boolean;
     className?: string;
     tabIndex?: number;
@@ -1038,7 +1038,7 @@ export interface MultiselectProps {
 
 // N --------------------------------------------------------------------------------------------------
 
-export interface NavItems {
+export interface NavItem {
     key: string;
     item: React.ReactNode;
     disabled?: boolean;
@@ -1083,7 +1083,7 @@ export interface NumberControlProps {
     step?: number;
     disabled?: boolean;
     onValueChanged?: (value: number) => void;
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
@@ -1097,7 +1097,7 @@ export interface NumberInputProps {
     type?: string;
     disabled?: boolean;
     onValueChanged?: (value: number) => void;
-    bsSize?: 'sm' | 'lg' | 'small' | 'large';
+    bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
@@ -1557,7 +1557,7 @@ export interface SimpleButtonDropdownProps {
     noCaret?: boolean;
     splitButton?: boolean;
     usePortal?: boolean;
-    items: MenuItemProps[];
+    items: MenuItem[];
     className?: string;
     dropdownClassName?: string;
     disabled?: boolean;
@@ -1891,15 +1891,15 @@ export interface TagListProps {
     className?: string;
 }
 
-export interface TagManagerTagProp {
+export interface TagManagerTag {
     label?: string;
     toAdd?: boolean;
     toRemove?: boolean;
 }
 
 export interface TagManagerProps {
-    tagList: TagManagerTagProp[];
-    tagSuggestions: TagManagerTagProp[];
+    tagList: TagManagerTag[];
+    tagSuggestions: TagManagerTag[];
     onTagListChange?: Function;
     placeholder?: string;
     customTagPlaceholder?: string;
@@ -2192,3 +2192,7 @@ export type UseSessionStorage = (key: string, defaultValue: any) => [any, Functi
 export type UseTimeout = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
 export type UseWindowResize = (callback: () => void, timeout?: number) => void;
+
+export type UseScrollPosition = (
+    target: Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined
+) => number;

package/lib/es/useScrollPosition.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useScrollPosition' {
+    import { UseScrollPosition } from './types';
+    export default UseScrollPosition;
+}

package/lib/es/{BoxConnector.js → useScrollPosition.js}

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _BoxConnector2["default"];
+    return _useScrollPosition2["default"];
   }
 });
-var _BoxConnector2 = _interopRequireDefault(require("./components/boxConnector/BoxConnector"));
+var _useScrollPosition2 = _interopRequireDefault(require("./hooks/useScrollPosition"));

package/lib/es/utils/colorScheme.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setColorScheme = exports.getColorScheme = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var COOKIE_NAME = 'uikit-color-scheme';
+var THEME_DATA_ATTRIBUTE = 'data-theme';
+var PATH = '/';
+var DOMAIN = '.rio.cloud';
+var EXPIRATION_DATE = 'Thu, 18 Dec 2030 12:00:00 UTC';
+var getColorScheme = function getColorScheme() {
+  return readColorSchemeFromCookie();
+};
+exports.getColorScheme = getColorScheme;
+var setColorScheme = function setColorScheme(scheme) {
+  return writeColorSchemeToCookie(scheme);
+};
+exports.setColorScheme = setColorScheme;
+var readColorSchemeFromCookie = function readColorSchemeFromCookie() {
+  var decodedCookie = decodeURIComponent(document.cookie);
+  console.log(decodedCookie);
+  var _decodedCookie$split$ = decodedCookie.split(';').filter(function (entry) {
+      return entry.includes(COOKIE_NAME);
+    }),
+    _decodedCookie$split$2 = (0, _slicedToArray2["default"])(_decodedCookie$split$, 1),
+    uikitCname = _decodedCookie$split$2[0];
+  if (!uikitCname) {
+    return;
+  }
+  var _uikitCname$split = uikitCname.split('='),
+    _uikitCname$split2 = (0, _slicedToArray2["default"])(_uikitCname$split, 2),
+    colorScheme = _uikitCname$split2[1];
+  console.log("readColorSchemeFromCookie: ".concat(colorScheme));
+  if (!colorScheme) {
+    return;
+  }
+  var html = document.documentElement;
+  if (colorScheme === 'default' || colorScheme === 'system') {
+    html.removeAttribute(THEME_DATA_ATTRIBUTE);
+    return colorScheme;
+  }
+  if (colorScheme === 'light' || colorScheme === 'dark') {
+    html.setAttribute(THEME_DATA_ATTRIBUTE, colorScheme);
+    return colorScheme;
+  }
+};
+
+// This should be done by a RIO service like User Profile SPA using a theme switcher component from the uikit
+// where this function is referenced
+var writeColorSchemeToCookie = function writeColorSchemeToCookie(scheme) {
+  var newCookieValues = encodeURIComponent("".concat(scheme, ";domain=").concat(DOMAIN, ";expires=").concat(EXPIRATION_DATE, ";path=").concat(PATH));
+  document.cookie = "".concat(COOKIE_NAME, "=").concat(newCookieValues);
+  // console.log(`writeColorSchemeToCookie: ${newCookieValues}`);
+};

package/lib/es/utils/init.js

@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 var _process = _interopRequireDefault(require("process"));
 var _deviceUtils = require("./deviceUtils");
+var _colorScheme = require("./colorScheme");
 var _version = _interopRequireDefault(require("../version.json"));
 var uikitVersion = _version["default"].version;
 
@@ -129,6 +130,7 @@ var initDocumentBootstrapping = function initDocumentBootstrapping(document) {
     html.classList.add('window-iframe');
   }
   if (!isTestEnv()) {
+    (0, _colorScheme.getColorScheme)();
     printPoweredByRIO();
     checkForReleaseVersion();
     checkMatchingUkitVersions();

package/lib/es/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1-beta.24"
+"version": "0.16.2-beta.2"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.1-beta.24",
+    "version": "0.16.2-beta.2",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -14,13 +14,14 @@
         "build:style-core": "vite build --mode style-core",
         "build:style-responsive": "vite build --mode style-responsive",
         "build:style-print": "vite build --mode style-print",
-        "build:style-website": "vite build --mode style-website",
+        "build:style-website": "vite build --mode style-website && npm run fixCssMinified",
         "build:style-buyButton": "vite build --mode style-buyButton",
         "build:style-man": "vite build --mode style-man",
         "build:style-vw": "vite build --mode style-vw",
         "build:style-scania": "vite build --mode style-scania",
         "build:style-xmas": "vite build --mode style-xmas",
         "fixEsmImports": "node tools/fixEsmImportsInDeclarations.mjs",
+        "fixCssMinified": "node tools/fixCssMinified.mjs",
         "copy-to-package": "copyfiles package.json README.md LICENSE package",
         "test": "vitest run",
         "test:ci": "vitest run --reporter=junit --outputFile.junit=./results/jest/junit.xml",
@@ -67,7 +68,6 @@
         "@vitest/coverage-c8": "0.24.3",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
         "autoprefixer": "10.4.12",
-        "base64-font-loader": "0.0.4",
         "copyfiles": "2.4.1",
         "dotenv": "16.0.3",
         "enzyme": "3.11.0",
@@ -85,8 +85,10 @@
         "jsdom-global": "3.0.2",
         "less": "4.1.3",
         "license-checker": "25.0.1",
+        "postcss": "^8.4.19",
         "postcss-preset-env": "7.8.2",
         "postcss-short": "5.0.0",
+        "postcss-variable-compress": "^2.0.1",
         "prettier": "2.7.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
@@ -126,6 +128,6 @@
         "react-popper": "2.3.0",
         "react-responsive": "9.0.0",
         "react-transition-group": "4.4.5",
-        "recharts": "2.1.15"
+        "recharts": "^2.1.14"
     }
 }

package/styles/components/Activity.less

@@ -1,7 +1,7 @@
 .activity {
   align-items: center;
   border-radius: @border-radius-round;
-  color: @color-white;
+  color: var(--color-white);
   display: inline-flex;
   font-weight: @font-normal;
 
@@ -23,34 +23,33 @@
   }
 
   &.activity-available {
-    background: darken(@color-status-available, 5%);
-
+    background-color: .hslb(@color-status-available-hsl, '-', '5%')[@result];
     .activity-icon {
-      background: @color-status-available;
+      background: var(--color-status-available);
     }
   }
 
   &.activity-driving {
-    background: darken(@color-status-driving, 5%);
+    background-color: .hslb(@color-status-driving-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-driving;
+      background: var(--color-status-driving);
     }
   }
 
   &.activity-resting {
-    background: darken(@color-status-resting, 5%);
+    background-color: .hslb(@color-status-resting-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-resting;
+      background: var(--color-status-resting);
     }
   }
 
   &.activity-working {
-    background: darken(@color-status-working, 5%);
+    background-color: .hslb(@color-status-working-hsl, '-', '5%')[@result];
 
     .activity-icon {
-      background: @color-status-working;
+      background: var(--color-status-working);
     }
   }
 

package/styles/components/ApplicationHeader.less

@@ -1,5 +1,5 @@
 .ApplicationHeader {
-  background-color: @color-white;
+  background-color: var(--color-white);
   border: none;
   display: flex;
   float: none !important;
@@ -14,7 +14,7 @@
     right: 0;
     bottom: 0;
     height: 1px;
-    background-color:@gray-light;
+    background-color:var(--gray-light);
     z-index: 1;
   }
 
@@ -48,15 +48,15 @@
 
     .CollapsedDropdown > .dropdown-menu {
       > .ApplicationActionBar {
-        background-color: @gray-lightest;
-        //border-bottom: 1px solid @gray-lighter;
-        border-top: 1px solid @gray-lighter;
+        background-color: var(--gray-lightest);
+        //border-bottom: 1px solid var(--gray-lighter);
+        border-top: 1px solid var(--gray-lighter);
         justify-content: flex-end;
         position: relative;
         width: 100%;
 
         .ActionBarItemIcon .badge {
-          border-color: @gray-lightest;
+          border-color: var(--gray-lightest);
         }
       }
     }
@@ -82,7 +82,7 @@
 
   .navbar-brand {
     background-color: transparent !important;
-    background-image: @brand-icon-rio !important;
+    background-image: var(--brand-icon-rio) !important;
     background-size: cover;
     display: block;
     height: @ApplicationLayoutHeaderHeighticon-height;
@@ -92,7 +92,7 @@
     width: @ApplicationLayoutHeaderHeight;
 
     &:after {
-      background: @color-black;
+      background: var(--color-black);
       bottom: 0;
       content: '';
       display: block;
@@ -104,7 +104,7 @@
     }
 
     &.home-icon {
-      background-image: @brand-icon-home !important;
+      background-image: var(--brand-icon-home) !important;
     }
 
     > a,
@@ -116,28 +116,23 @@
   }
 
   .ApplicationActionBar {
-    background-color: @color-white;
+    background-color: var(--color-white);
     cursor: auto;
     display: flex;
 
-    // position: absolute;
-    // right: 0;
-    // top: 0;
-
     > .navigationItem {
       align-items: center;
-      color: @gray-dark;
+      color: var(--gray);
       cursor: pointer;
       display: flex;
-      fill: @gray-dark;
+      fill: var(--gray-darkest);
       height: @ApplicationLayoutHeaderHeightWithoutBorder;
       justify-content: center;
       position: relative;
-      //text-align: center;
 
       &:hover .icon {
-        color: @gray-darker;
-        fill: @gray-darker;
+        color: var(--color-black);
+        fill: var(--color-black);
       }
 
       > .ActionBarItem {
@@ -203,7 +198,7 @@
 
     &Icon {
       margin-top: 2px;
-      color: @gray-dark;
+      color: var(--gray-darkest);
       font-size: 16px;
     }
 
@@ -239,8 +234,8 @@
   max-width: calc(~'100% - @{ApplicationLayoutHeaderHeight}');
 
   // NOTE: enforce it with important so all services look similar
-  background-color: @color-white !important;
-  color: @color-black !important;
+  // background-color: var(--color-white) !important;
+  color: var(--color-black) !important;
 
   .dropdown {
     width: 300px;
@@ -271,7 +266,7 @@
 
     // Style the separator between main dropdown and submodules
     &:after {
-      background-color: @gray-lighter;
+      background-color: var(--gray-lighter);
       bottom: 15px;
       content: '';
       display: block;
@@ -328,7 +323,7 @@
     overflow-y: auto;
 
     > li > a {
-      color: @color-black;
+      color: var(--color-black);
       font-size: 14px;
       font-weight: @font-medium;
       padding: 5px @ApplicationLayoutHeaderHeightpadding-horizontal;
@@ -397,7 +392,7 @@
 
     > a {
       background-color: transparent;
-      color: @gray;
+      color: var(--gray);
       cursor: pointer;
       font-size: 14px;
       margin: 0 15px;
@@ -419,7 +414,7 @@
     &.disabled,
     &:disabled {
       > a {
-        color: @gray-light
+        color: var(--gray-light)
       }
     }
 
@@ -430,11 +425,11 @@
       &:hover > a {
         &:not(.disabled):not(:disabled) {
           background-color: transparent;
-          box-shadow: inset 0 -4px 0 @color-black, 0 0px 0 @color-black;
-          color: @color-black;
+          box-shadow: inset 0 -4px 0 var(--color-black), 0 0px 0 var(--color-black);
+          color: var(--color-black);
 
           &:after {
-            background-color: @color-black;
+            background-color: var(--color-black);
             height: 3px;
             width: 100%;
             z-index: 1;

package/styles/components/ApplicationLayout.less

@@ -56,8 +56,8 @@
     .ApplicationLayoutBodyNavigation {
       &:not(.unstyled) {
         align-items: center;
-        background: @color-white;
-        border-bottom: 1px solid @gray-light;
+        background: var(--color-white);
+        border-bottom: 1px solid var(--gray-light);
         display: flex;
         justify-content: space-between;
         // padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
@@ -85,14 +85,14 @@
 
               &:hover,
               &:focus {
-                box-shadow: inset 0px -2px 0px 0px @color-black;
+                box-shadow: inset 0px -2px 0px 0px var(--color-black);
               }
             }
 
             &.active,
             &:active {
               > a, > span, > div {
-                box-shadow: inset 0px -3px 0px 0px @color-black;
+                box-shadow: inset 0px -3px 0px 0px var(--color-black);
               }
             }
           }
@@ -175,10 +175,10 @@
 
   .ApplicationLayoutBodyBottomBar {
     align-items: center;
-    background-color: @color-white;
-    border-top: 1px solid @gray-light;
+    background-color: var(--color-white);
+    border-top: 1px solid var(--gray-light);
     display: flex;
-    height: @footer-height;
+    height: @ApplicationLayoutBodyBottomBarHeight;
     padding: 10px;
 
     &.use-body-padding {