@occmundial/occ-atomic 3.0.0-beta.60 → 3.0.0-beta.62

package/build/tokens/colors.json

@@ -99,43 +99,43 @@
       "100": "#fff"
     },
     "indigo": {
-      "5": "hsl(221 91.2% 35.7% / 0.05)",
-      "10": "hsl(221 91.2% 35.7% / 0.1)",
-      "20": "hsl(221 91.2% 35.7% / 0.2)",
-      "30": "hsl(221 91.2% 35.7% / 0.3)",
-      "40": "hsl(221 91.2% 35.7% / 0.4)",
-      "50": "hsl(221 91.2% 35.7% / 0.5)",
-      "60": "hsl(221 91.2% 35.7% / 0.6)",
-      "70": "hsl(221 91.2% 35.7% / 0.7)",
-      "80": "hsl(221 91.2% 35.7% / 0.8)",
-      "90": "hsl(221 91.2% 35.7% / 0.9)",
-      "100": "hsl(221 91.2% 35.7%)"
+      "5": "rgba(8, 60, 174, 0.05)",
+      "10": "rgba(8, 60, 174, 0.1)",
+      "20": "rgba(8, 60, 174, 0.2)",
+      "30": "rgba(8, 60, 174, 0.3)",
+      "40": "rgba(8, 60, 174, 0.4)",
+      "50": "rgba(8, 60, 174, 0.5)",
+      "60": "rgba(8, 60, 174, 0.6)",
+      "70": "rgba(8, 60, 174, 0.7)",
+      "80": "rgba(8, 60, 174, 0.8)",
+      "90": "rgba(8, 60, 174, 0.9)",
+      "100": "#083CAE"
     },
     "pink": {
-      "5": "hsl(344 87.1% 57.5% / 0.05)",
-      "10": "hsl(344 87.1% 57.5% / 0.1)",
-      "20": "hsl(344 87.1% 57.5% / 0.2)",
-      "30": "hsl(344 87.1% 57.5% / 0.3)",
-      "40": "hsl(344 87.1% 57.5% / 0.4)",
-      "50": "hsl(344 87.1% 57.5% / 0.5)",
-      "60": "hsl(344 87.1% 57.5% / 0.6)",
-      "70": "hsl(344 87.1% 57.5% / 0.7)",
-      "80": "hsl(344 87.1% 57.5% / 0.8)",
-      "90": "hsl(344 87.1% 57.5% / 0.9)",
-      "100": "hsl(344 87.1% 57.5%)"
+      "5": "rgba(241, 52, 101, 0.05)",
+      "10": "rgba(241, 52, 101, 0.1)",
+      "20": "rgba(241, 52, 101, 0.2)",
+      "30": "rgba(241, 52, 101, 0.3)",
+      "40": "rgba(241, 52, 101, 0.4)",
+      "50": "rgba(241, 52, 101, 0.5)",
+      "60": "rgba(241, 52, 101, 0.6)",
+      "70": "rgba(241, 52, 101, 0.7)",
+      "80": "rgba(241, 52, 101, 0.8)",
+      "90": "rgba(241, 52, 101, 0.9)",
+      "100": "#F13465"
     },
     "corp": {
-      "5": "hsl(234 75.4% 12.7% / 0.05)",
-      "10": "hsl(234 75.4% 12.7% / 0.1)",
-      "20": "hsl(234 75.4% 12.7% / 0.2)",
-      "30": "hsl(234 75.4% 12.7% / 0.3)",
-      "40": "hsl(234 75.4% 12.7% / 0.4)",
-      "50": "hsl(234 75.4% 12.7% / 0.5)",
-      "60": "hsl(234 75.4% 12.7% / 0.6)",
-      "70": "hsl(234 75.4% 12.7% / 0.7)",
-      "80": "hsl(234 75.4% 12.7% / 0.8)",
-      "90": "hsl(234 75.4% 12.7% / 0.9)",
-      "100": "hsl(234 75.4% 12.7%)"
+      "5": "rgba(8, 13, 57, 0.05)",
+      "10": "rgba(8, 13, 57, 0.1)",
+      "20": "rgba(8, 13, 57, 0.2)",
+      "30": "rgba(8, 13, 57, 0.3)",
+      "40": "rgba(8, 13, 57, 0.4)",
+      "50": "rgba(8, 13, 57, 0.5)",
+      "60": "rgba(8, 13, 57, 0.6)",
+      "70": "rgba(8, 13, 57, 0.7)",
+      "80": "rgba(8, 13, 57, 0.8)",
+      "90": "rgba(8, 13, 57, 0.9)",
+      "100": "#080D39"
     },
     "black": {
       "0": "rgba(0,0,0,0.0)",
@@ -202,10 +202,10 @@
     },
     "secondary": {
       "bg": {
-        "default": "hsl(221 91.2% 35.7% / 0.05)",
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)",
+        "default": "rgba(8, 60, 174, 0.05)",
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)",
+        "disabled": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "default": "rgba(255,255,255,0.1)",
           "hover": "rgba(255,255,255,0.2)",
@@ -216,8 +216,8 @@
     },
     "tertiary": {
       "bg": {
-        "hover": "hsl(221 91.2% 35.7% / 0.05)",
-        "active": "hsl(221 91.2% 35.7% / 0.1)",
+        "hover": "rgba(8, 60, 174, 0.05)",
+        "active": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "hover": "rgba(255,255,255,0.05)",
           "active": "rgba(255,255,255,0.1)"
@@ -234,8 +234,8 @@
     },
     "ghost": {
       "bg": {
-        "hover": "hsl(234 75.4% 12.7% / 0.05)",
-        "active": "hsl(234 75.4% 12.7% / 0.1)",
+        "hover": "rgba(8, 13, 57, 0.05)",
+        "active": "rgba(8, 13, 57, 0.1)",
         "inverse": {
           "hover": "rgba(255,255,255,0.05)",
           "active": "rgba(255,255,255,0.1)"
@@ -304,8 +304,8 @@
   "dropdown": {
     "bg": {
       "default": "#fff",
-      "hover": "hsl(221 91.2% 35.7% / 0.05)",
-      "active": "hsl(221 91.2% 35.7% / 0.1)"
+      "hover": "rgba(8, 60, 174, 0.05)",
+      "active": "rgba(8, 60, 174, 0.1)"
     }
   },
   "checkbox": {
@@ -313,7 +313,7 @@
       "bg": {
         "default": "#0059CD",
         "hover": "#083CAE",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)"
+        "disabled": "rgba(8, 60, 174, 0.1)"
       },
       "border": {
         "default": "rgba(255,255,255,0.2)"
@@ -436,8 +436,8 @@
     },
     "brand": {
       "bg": {
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)"
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)"
       }
     },
     "white": {
@@ -464,10 +464,10 @@
     },
     "unselected": {
       "bg": {
-        "default": "hsl(221 91.2% 35.7% / 0.05)",
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)"
+        "default": "rgba(8, 60, 174, 0.05)",
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)",
+        "disabled": "rgba(8, 60, 174, 0.1)"
       }
     }
   },
@@ -478,8 +478,8 @@
       "active": "#ABBDE4",
       "disabled": "#EDEDF1",
       "overlay": {
-        "hover": "hsl(234 75.4% 12.7% / 0.3)",
-        "active": "hsl(234 75.4% 12.7% / 0.4)"
+        "hover": "rgba(8, 13, 57, 0.3)",
+        "active": "rgba(8, 13, 57, 0.4)"
       }
     }
   },
@@ -504,10 +504,10 @@
         "disabled": "#F6809E"
       },
       "secondary": {
-        "default": "hsl(221 91.2% 35.7% / 0.05)",
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)",
+        "default": "rgba(8, 60, 174, 0.05)",
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)",
+        "disabled": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "default": "rgba(255,255,255,0.1)",
           "hover": "rgba(255,255,255,0.2)",
@@ -516,8 +516,8 @@
         }
       },
       "tertiary": {
-        "hover": "hsl(221 91.2% 35.7% / 0.05)",
-        "active": "hsl(221 91.2% 35.7% / 0.1)",
+        "hover": "rgba(8, 60, 174, 0.05)",
+        "active": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "hover": "rgba(255,255,255,0.05)",
           "active": "rgba(255,255,255,0.1)"
@@ -535,8 +535,8 @@
         }
       },
       "ghost": {
-        "hover": "hsl(234 75.4% 12.7% / 0.05)",
-        "active": "hsl(234 75.4% 12.7% / 0.1)"
+        "hover": "rgba(8, 13, 57, 0.05)",
+        "active": "rgba(8, 13, 57, 0.1)"
       }
     },
     "default": "#F8FAFD",
@@ -564,7 +564,8 @@
       "disabled": "#D3D4DC"
     },
     "inverse": {
-      "default": "#fff",
+      "bold": "#fff",
+      "default": "rgba(255,255,255,0.7)",
       "disabled": "rgba(255,255,255,0.3)"
     },
     "success": "#38d373",
@@ -600,7 +601,8 @@
     },
     "info": {
       "subtle": "#b9d7ff"
-    }
+    },
+    "accent": "#F13465"
   },
   "text": {
     "corp": {

package/build/tokens/shadows.json

@@ -1,10 +1,10 @@
 {
-  "focus-pink": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-  "focus-indigo": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+  "focus-pink": "0 0 0 8px rgba(241, 52, 101, 0.3)",
+  "focus-indigo": "0 0 0 8px rgba(8, 60, 174, 0.3)",
   "focus-bright-blue": "0 0 0 8px rgba(0,110,255,0.3)",
   "focus-white": "0 0 0 8px rgba(255,255,255,0.2)",
   "focus-sky": "0 0 0 8px rgba(206,216,240,0.4)",
-  "focus-corp": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+  "focus-corp": "0 0 0 8px rgba(8, 13, 57, 0.1)",
   "elevation-elevation-1": "0 1px 2px 0 rgba(8,13,57,0.12), 0 1px 6px 0 rgba(9,61,173,0.05)",
   "elevation-elevation-2": "0 3px 3px -1px rgba(8,13,57,0.12), 0 3px 12px 0 rgba(9,61,173,0.08)",
   "elevation-elevation-3": "0 4px 5px -3px rgba(8,13,56,0.12), 0 6px 18px 0 rgba(9,61,173,0.08)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.60",
+  "version": "3.0.0-beta.62",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",

package/build/NavIcon/NavIcon.js

@@ -1,112 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var NavIcon = /*#__PURE__*/function (_React$Component) {
-  _inherits(NavIcon, _React$Component);
-
-  var _super = _createSuper(NavIcon);
-
-  function NavIcon() {
-    _classCallCheck(this, NavIcon);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(NavIcon, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          selected = _this$props.selected,
-          label = _this$props.label,
-          onClick = _this$props.onClick,
-          direction = _this$props.direction,
-          className = _this$props.className,
-          testId = _this$props.testId,
-          id = _this$props.id,
-          iconName = _this$props.iconName,
-          white = _this$props.white;
-      var iconColor = white ? _colors["default"].bgWhite : _colors["default"].grey600;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.cont).concat(selected ? " ".concat(classes.selected) : '').concat(className ? " ".concat(className) : ''),
-        onClick: onClick,
-        "data-testid": testId,
-        id: id
-      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-        display: "flex",
-        direction: direction,
-        justifyContent: "center",
-        alignItems: "center",
-        className: classes.flex
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: iconName,
-        colors: [iconColor]
-      }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        micro: true
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.text
-      }, label))));
-    }
-  }]);
-
-  return NavIcon;
-}(_react["default"].Component);
-
-NavIcon.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  selected: _propTypes["default"].bool,
-  iconName: _propTypes["default"].string.isRequired,
-  label: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  width: _propTypes["default"].number,
-  showBar: _propTypes["default"].bool,
-  direction: _propTypes["default"].oneOf(['col', 'row']),
-  className: _propTypes["default"].string,
-
-  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
-  testId: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  white: _propTypes["default"].bool
-};
-var _default = NavIcon;
-exports["default"] = _default;

package/build/NavIcon/styles.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = {
-  cont: {
-    width: function width(props) {
-      return props.width ? props.width : null;
-    },
-    display: 'inline-block',
-    height: _spacing["default"].xLarge,
-    cursor: 'pointer',
-    position: 'relative',
-    '&:hover $svg': {
-      fill: function fill(props) {
-        return props.white ? _colors["default"].bgWhite : _colors["default"].grey900;
-      },
-      opacity: function opacity(props) {
-        return props.white ? 0.6 : null;
-      }
-    },
-    '&:hover $text': {
-      color: function color(props) {
-        return props.white ? _colors["default"].white : _colors["default"].ink;
-      },
-      opacity: function opacity(props) {
-        return props.white ? 0.6 : null;
-      }
-    },
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      width: '100%',
-      height: 3,
-      bottom: 0,
-      left: 0,
-      background: 'transparent',
-      transition: '0.3s all'
-    }
-  },
-  flex: {
-    height: _spacing["default"].xLarge
-  },
-  selected: {
-    '& $svg, &:hover $svg': {
-      fill: function fill(props) {
-        return props.white ? _colors["default"].bgWhite : _colors["default"].prim;
-      }
-    },
-    '& $text, &:hover $text': {
-      color: function color(props) {
-        return props.white ? _colors["default"].white : _colors["default"].prim;
-      }
-    },
-    '&:after': {
-      background: function background(props) {
-        return props.showBar ? props.white ? _colors["default"].sec : _colors["default"].prim : null;
-      }
-    }
-  },
-  text: {
-    color: function color(props) {
-      return props.white ? _colors["default"].white : _colors["default"].inkLight;
-    },
-    marginLeft: function marginLeft(props) {
-      return props.direction !== 'col' ? _spacing["default"].xTiny : null;
-    },
-    textTransform: 'uppercase',
-    transition: '0.3s all'
-  }
-};
-exports["default"] = _default;