@rio-cloud/rio-uikit 0.16.1-beta-7 → 0.16.1-beta-10

package/lib/themes/MAN/styles/man-uikit.less

@@ -0,0 +1,48 @@
+// Core
+@import (less) '../../../styles/rio-uikit-core.less';
+
+// Utility Classes
+@import (less) '../../../styles/design/responsive/_imports.less';
+.import-reponsive(
+  @default: true;
+  @xs: true;
+  @ls: true;
+  @sm: true;
+  @md: true;
+  @lg: true;
+  @xl: true;
+  @print: false;
+);
+
+// Fonts
+@font-man: true;
+
+// MAN font
+@font-family-base: MANEuropeLight, 'serif';
+@headings-font-family: MANEuropeCondensed, 'serif';
+
+// Colors
+@brand-primary: #303c49;
+@brand-secondary: #d22b40;
+@brand-info: #4b96d2;
+@brand-primary: #303c49;
+@brand-danger: #d90000;
+@brand-warning: #ff8e3c;
+
+// used by MAN only
+@color-base-dark: #4c5667;
+@color-base-light: #d0d8de;
+
+// Color - Custom highlight colors
+@color-highlight-darkest: darken(@brand-primary, 30%);
+@color-highlight-darker: darken(@brand-primary, 20%);
+@color-highlight-dark: darken(@brand-primary, 10%);
+@color-highlight: @brand-primary;
+@color-highlight-light: lighten(@brand-primary, 25%);
+@color-highlight-lighter: lighten(@brand-primary, 41%);
+@color-highlight-lightest: lighten(@brand-primary, 48%);
+@color-highlight-decent: lighten(@brand-primary, 50%);
+
+@color-map-marker-poi: @brand-info;
+
+@border-radius-default: 2px;

package/lib/themes/RIO/styles/rio-uikit.less

@@ -0,0 +1,20 @@
+// Styles
+@import (less) '../../../styles/rio-uikit-core.less';
+
+// Utility Classes
+@import (less) '../../../styles/design/responsive/_imports.less';
+.import-reponsive(
+  @default: true;
+  @xs: true;
+  @ls: true;
+  @sm: true;
+  @md: true;
+  @lg: true;
+  @xl: true;
+  @print: false;
+);
+
+// Fonts
+@font-source-sans: true;
+@font-san-francisco: true;
+@font-roboto: true;

package/lib/themes/SCANIA/styles/scania-uikit.less

@@ -0,0 +1,36 @@
+// Core
+@import (less) '../../../styles/rio-uikit-core.less';
+
+// Utility Classes
+@import (less) '../../../styles/design/responsive/_imports.less';
+.import-reponsive(
+  @default: true;
+  @xs: true;
+  @ls: true;
+  @sm: true;
+  @md: true;
+  @lg: true;
+  @xl: true;
+  @print: false;
+);
+
+// Fonts
+@font-scania: true;
+@font-family-base: Scania Sans, 'serif';
+
+// Colors
+@brand-primary: #081c38;
+@brand-secondary: #132d55;
+@brand-info: #4580e9;
+@brand-success: #3d9e81;
+@brand-warning: #ebba3d;
+@brand-danger: #cd3835;
+
+// Color - Grays
+@gray-darkest: #0f1113;
+@gray-darker: #4d5a6d;
+@gray-dark: #7b8496;
+@gray: #c6cbd5;
+@gray-light: #e3e6eb;
+@gray-lighter: #eaedf1;
+@gray-lightest: #f8f9fa;

package/lib/themes/Volkswagen/components/applicationHeader/VolkswagenApplicationHeader.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VolkswagenApplicationHeader = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ApplicationActionBar = require("../../../../components/applicationHeader/ApplicationActionBar");
+
+var _useResizeObserver3 = _interopRequireDefault(require("../../../../hooks/useResizeObserver"));
+
+var _modulePropTypes = _interopRequireDefault(require("./modulePropTypes"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var VolkswagenApplicationHeader = function VolkswagenApplicationHeader(props) {
+  var homeRoute = props.homeRoute,
+      className = props.className,
+      appNavigator = props.appNavigator,
+      appNavigatorClassName = props.appNavigatorClassName,
+      appMenuItems = props.appMenuItems,
+      navItems = props.navItems,
+      actionBarItems = props.actionBarItems;
+  var actionBarRef = (0, _react.useRef)();
+
+  var _useResizeObserver = (0, _useResizeObserver3.default)(),
+      _useResizeObserver2 = (0, _slicedToArray2.default)(_useResizeObserver, 2),
+      navRef = _useResizeObserver2[0],
+      contentRect = _useResizeObserver2[1].contentRect; // const getContentRect = useCallback(key => contentRect && Math.round(contentRect[key]), [contentRect]);
+  // const containerWidth = getContentRect('width') || 0;
+  // const isMobileWidth = containerWidth <= MOBILE_MAX_WIDTH;
+  // const hasActionBarItems = !isEmpty(actionBarItems);
+
+
+  var classNames = (0, _classnames.default)('ApplicationHeader VolkswagenApplicationHeader', 'user-select-none', className && className);
+  return /*#__PURE__*/_react.default.createElement("nav", {
+    className: classNames,
+    ref: navRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "brand"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "logo"
+  })), (0, _isEmpty.default)(navItems) && /*#__PURE__*/_react.default.createElement("ul", {
+    className: "SubmoduleNavigation nav"
+  }), !(0, _isEmpty.default)(navItems) && /*#__PURE__*/_react.default.createElement("ul", {
+    className: "SubmoduleNavigation nav"
+  }, navItems.map(function (navItem) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: navItem.key,
+      className: "submodule",
+      "data-nav-item-key": navItem.key
+    }, navItem.route);
+  })), /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
+    nodeRef: actionBarRef,
+    items: actionBarItems
+  }));
+};
+
+exports.VolkswagenApplicationHeader = VolkswagenApplicationHeader;
+var _default = VolkswagenApplicationHeader;
+exports.default = _default;
+VolkswagenApplicationHeader.defaultProps = {
+  homeRoute: '',
+  actionBarItems: [],
+  onMount: function onMount() {},
+  onUnmount: function onUnmount() {}
+};
+VolkswagenApplicationHeader.propTypes = {
+  className: _propTypes.default.string,
+  homeRoute: _propTypes.default.node.isRequired,
+  appMenuItems: _propTypes.default.arrayOf(_modulePropTypes.default),
+  appNavigator: _propTypes.default.node,
+  appNavigatorClassName: _propTypes.default.string,
+  navItems: _propTypes.default.arrayOf(_modulePropTypes.default),
+  actionBarItems: _propTypes.default.arrayOf(_propTypes.default.node),
+  onMount: _propTypes.default.func,
+  onUnmount: _propTypes.default.func
+};

package/lib/themes/Volkswagen/components/applicationHeader/modulePropTypes.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _default = _propTypes.default.shape({
+  key: _propTypes.default.string.isRequired,
+  route: _propTypes.default.node.isRequired
+});
+
+exports.default = _default;

package/lib/themes/Volkswagen/styles/vw-uikit.less

@@ -0,0 +1,205 @@
+// Core
+@import (less) '../../../styles/rio-uikit-core.less';
+
+// Utility Classes
+@import (less) '../../../styles/design/responsive/_imports.less';
+.import-reponsive(
+  @default: true;
+  @xs: true;
+  @ls: true;
+  @sm: true;
+  @md: true;
+  @lg: true;
+  @xl: true;
+  @print: false;
+);
+
+// Fonts
+@font-vw: true;
+@font-family-base: VWAGTheSans, 'serif';
+
+// ApplicationHeader
+@logo-height: 42px;
+@logo-width: 204px;
+@navbar-height: 178px;
+
+// Colors - Text
+@color-white: #ffffff;
+@color-black: #000000;
+
+// Color - Grays
+@gray-darkest: #1b1e1f;
+@gray-darker: #4c5356;
+@gray-dark: #636a6d;
+@gray: #91979c;
+@gray-light: #cacdd2;
+@gray-lighter: #dfe2e6;
+@gray-lightest: #f0f1f2;
+
+// Color - Brand Colors
+@brand-primary: #004666;
+@brand-secondary: #b23672;
+@brand-success: #64a844;
+@brand-warning: #ff9b00;
+@brand-danger: #da0c1f;
+@brand-info: #4B80A6;
+
+// Color - Driver Status
+@color-status-available: #239b7d;
+@color-status-driving: #3690ae;
+@color-status-resting: #626b72;
+@color-status-working: #94488b;
+
+// Color - Map Marker
+@color-map-marker-asset: #2a3740;
+@color-map-marker-poi: #b23672;
+@color-map-marker-geofence: #5a4876;
+@color-map-marker-route: #3690ae;
+
+// Color - Rating Status
+@color-rating-1: #da0c1f;
+@color-rating-2: #e68b00;
+@color-rating-3: #ffc061;
+@color-rating-4: #64a844;
+@color-rating-5: #46752f;
+
+// Color - Buttons
+@btn-primary-bg: @brand-primary;
+@btn-primary-border: @brand-primary;
+@btn-primary-color: @color-white;
+
+@btn-default-border: @brand-primary;
+@btn-default-color: @brand-primary;
+
+// Color - Custom highlight colors
+@color-highlight-darkest: #114146;
+@color-highlight-darker: #1c686e;
+@color-highlight-dark: #268e97;
+@color-highlight: #8DBFCF;
+@color-highlight-light: #8ddbe3;
+@color-highlight-lighter: #cef0f3;
+@color-highlight-lightest: #ebf9fa;
+@color-highlight-decent: #f3fbfc;
+
+@border-radius-sm: 0;
+@border-radius-default: 0;
+@border-radius-lg: 0;
+
+.btn.btn-default {
+  .button-variant(
+    ~'';
+    @btn-default-bg;
+    @btn-default-border;
+    @btn-default-color;
+    @color-highlight-lightest;
+    @color-highlight-lighter;
+    @color-highlight-lighter;
+    @color-highlight-lighter;
+    @btn-default-border;
+    @btn-default-border;
+    @btn-default-border;
+    @btn-default-border;
+    @btn-default-color;
+    @btn-default-color;
+    @btn-default-color;
+    @btn-default-color;
+  );
+}
+
+.btn.btn-primary {
+  .button-variant(
+    ~'';
+    @btn-primary-bg;
+    @btn-primary-border;
+    @btn-primary-color;
+    darken(@btn-primary-bg, 5%);
+    darken(@btn-primary-bg, 10%);
+    darken(@btn-primary-bg, 10%);
+    darken(@btn-primary-bg, 10%);
+    darken(@btn-primary-bg, 10%);
+    darken(@btn-primary-bg, 10%);
+    darken(@btn-primary-bg, 10%);
+    darken(@btn-primary-bg, 10%);
+    @btn-primary-color;
+    @btn-primary-color;
+    @btn-primary-color;
+    @btn-primary-color;
+  );
+}
+
+.VolkswagenApplicationHeader {
+  background-color: @color-white;
+  display: block;
+  height: @navbar-height;
+  position: relative;
+
+  .brand {
+    display: grid;
+    height: @logo-height * 3;
+    place-items: center;
+
+    .logo {
+      height: @logo-height;
+      width: @logo-width;
+      background-image: url('@{cdnBase}/svg/common/ico_vw_brandless.svg') !important;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: auto 100%;
+
+      .vw-aktiengesellschaft & {
+        background-image: url('@{cdnBase}/svg/common/ico_vw_aktiengesellschaft.svg') !important;
+      }
+
+      .vw-konzernlogistik & {
+        background-image: url('@{cdnBase}/svg/common/ico_vw_konzernlogistik.svg') !important;
+      }
+    }
+  }
+
+  .ModuleNavigation {
+    display: none;
+  }
+
+  .nav {
+    display: flex;
+    justify-content: center !important;
+
+    &.SubmoduleNavigation {
+      border-top: 1px solid @gray-lighter;
+      padding-left: 0;
+      width: 100%;
+    }
+
+    > li {
+      margin: 0 !important;
+
+      > a {
+        line-height: 20px;
+      }
+
+      &:only-child:not(.CollapsedDropdown) {
+        > a {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  .ApplicationActionBar {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(calc(~"-50% - 25px"));
+    z-index: 1;
+
+    > .navigationItem {
+      height: 50px;
+      width: auto;
+
+      > .ActionBarItem {
+        height: 50px;
+        width: 50px;
+      }
+    }
+  }
+}