@occmundial/occ-atomic 2.0.0-beta.6 → 2.0.0-beta.8

package/build/Icon/Icon.test.js

@@ -10,6 +10,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _index = _interopRequireDefault(require("./index"));
 
+var _Provider = _interopRequireDefault(require("../Provider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -54,25 +56,25 @@ describe("Icon styles", function () {
     var props = {
       iconName: "testing"
     };
-    expect(_styles["default"].icon.width(props)).toBe('5px');
-    expect(_styles["default"].icon.height(props)).toBe('5px');
-    expect(_styles["default"].icon.display(props)).toBe('inline-block');
+    expect(_styles["default"].oldIcon.width(props)).toBe('5px');
+    expect(_styles["default"].oldIcon.height(props)).toBe('5px');
+    expect(_styles["default"].oldIcon.display(props)).toBe('inline-block');
     props.width = 20;
     props.height = 20;
     props.display = "block";
-    expect(_styles["default"].icon.width(props)).toBe('20px');
-    expect(_styles["default"].icon.height(props)).toBe('20px');
-    expect(_styles["default"].icon.display(props)).toBe('block');
+    expect(_styles["default"].oldIcon.width(props)).toBe('20px');
+    expect(_styles["default"].oldIcon.height(props)).toBe('20px');
+    expect(_styles["default"].oldIcon.display(props)).toBe('block');
   });
   it('returns the icon with a given color', function () {
     var props = {
       iconName: "testing"
     };
-    expect(_styles["default"].icon.background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwMDA=)');
-    expect(_styles["default"].icon['&:hover'].background(props)).toBe(undefined);
+    expect(_styles["default"].oldIcon.background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwMDA=)');
+    expect(_styles["default"].oldIcon['&:hover'].background(props)).toBe(undefined);
     props.colors = ['#f00'];
     props.hover = ['#00f'];
-    expect(_styles["default"].icon.background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMDA=)');
-    expect(_styles["default"].icon['&:hover'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwMGY=)');
+    expect(_styles["default"].oldIcon.background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICNmMDA=)');
+    expect(_styles["default"].oldIcon['&:hover'].background(props)).toBe('url(data:image/svg+xml;base64,dGVzdGluZyAtICMwMGY=)');
   });
 });

package/build/Icon/__snapshots__/Icon.test.js.snap

@@ -8,6 +8,12 @@ Object {
     "cursor": "pointer",
   },
   "icon": Object {
+    "border": "0",
+    "boxSizing": "border-box",
+    "display": [Function],
+    "outline": "0",
+  },
+  "oldIcon": Object {
     "&:hover": Object {
       "background": [Function],
     },

package/build/Icon/styles.js

@@ -7,10 +7,23 @@ exports["default"] = void 0;
 
 var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
+var _mappedIcons = require("../subatomic/mappedIcons");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   icon: {
+    boxSizing: 'border-box',
+    display: function display(props) {
+      return props.display ? props.display : _icons["default"][_mappedIcons.oldToNewIcon[props.iconName]] ? _icons["default"][_mappedIcons.oldToNewIcon[props.iconName]].display : '';
+    },
+    border: '0',
+    outline: '0'
+  },
+  click: {
+    cursor: 'pointer'
+  },
+  oldIcon: {
     boxSizing: 'border-box',
     width: function width(props) {
       return props.width ? "".concat(props.width, "px") : _icons["default"][props.iconName] ? _icons["default"][props.iconName].width : '';
@@ -24,7 +37,7 @@ var _default = {
     border: '0',
     outline: '0',
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon(props.colors ? props.colors : undefined)) : '';
+      return props.iconName && _mappedIcons.legacyIcons[props.iconName] ? _icons["default"].base(_icons["default"][props.iconName].icon(props.colors ? props.colors : undefined)) : '';
     },
     transition: function transition(props) {
       return props.transition ? props.transition : '0.3s all';
@@ -34,9 +47,6 @@ var _default = {
         return props.hover && props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon(props.hover)) : undefined;
       }
     }
-  },
-  click: {
-    cursor: 'pointer'
   }
 };
 exports["default"] = _default;

package/build/Modal/Modal.test.js

@@ -41,9 +41,12 @@ describe("Modal", function () {
     var onClose = jest.fn();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
       classes: classes,
-      onClose: onClose
+      onClose: onClose,
+      testId: "modal-test"
     }));
-    wrapper.find('.closeIcon button').simulate('click');
+    wrapper.find({
+      "data-testid": 'modal-test__close-icon'
+    }).simulate('click');
     expect(onClose.mock.calls.length).toBe(1);
   });
   it('calls the onClose function when pressing the Esc key', function () {

package/build/NavAside/NavAside.js

@@ -117,7 +117,8 @@ var NavAside = /*#__PURE__*/function (_React$Component) {
         width: 24,
         height: 24,
         colors: [_colors["default"].grey900],
-        onClick: onClose
+        onClick: onClose,
+        testId: "navaside__close-icon"
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.content
       }, children))));

package/build/NavAside/NavAside.test.js

@@ -43,7 +43,9 @@ describe("NavAside", function () {
       classes: classes,
       onClose: onClose
     }));
-    wrapper.find('.closeIcon button').simulate('click');
+    wrapper.find({
+      "data-testid": "navaside__close-icon"
+    }).simulate('click');
     expect(onClose.mock.calls.length).toBe(1);
   });
   it('calls the onClose function when pressing the Esc key', function () {

package/build/NavIcon/NavIcon.js

@@ -15,6 +15,10 @@ 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"); } }
@@ -59,7 +63,10 @@ var NavIcon = /*#__PURE__*/function (_React$Component) {
           direction = _this$props.direction,
           className = _this$props.className,
           testId = _this$props.testId,
-          id = _this$props.id;
+          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,
@@ -71,8 +78,9 @@ var NavIcon = /*#__PURE__*/function (_React$Component) {
         justifyContent: "center",
         alignItems: "center",
         className: classes.flex
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.icon
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: iconName,
+        colors: [iconColor]
       }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         micro: true
       }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -97,7 +105,8 @@ NavIcon.propTypes = {
 
   /** 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
+  id: _propTypes["default"].string,
+  white: _propTypes["default"].bool
 };
 var _default = NavIcon;
 exports["default"] = _default;

package/build/NavIcon/styles.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
-
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,9 +20,9 @@ var _default = {
     height: _spacing["default"].xLarge,
     cursor: 'pointer',
     position: 'relative',
-    '&:hover $icon': {
-      background: function background(props) {
-        return _icons["default"].base(_icons["default"][props.iconName].icon([props.white ? _colors["default"].bgWhite : _colors["default"].grey900]));
+    '&: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;
@@ -53,9 +51,9 @@ var _default = {
     height: _spacing["default"].xLarge
   },
   selected: {
-    '& $icon, &:hover $icon': {
-      background: function background(props) {
-        return _icons["default"].base(_icons["default"][props.iconName].icon([props.white ? _colors["default"].bgWhite : _colors["default"].prim]));
+    '& $svg, &:hover $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].bgWhite : _colors["default"].prim;
       }
     },
     '& $text, &:hover $text': {
@@ -69,14 +67,6 @@ var _default = {
       }
     }
   },
-  icon: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    background: function background(props) {
-      return _icons["default"].base(_icons["default"][props.iconName].icon([props.white ? _colors["default"].bgWhite : _colors["default"].grey600]));
-    },
-    transition: '0.3s all'
-  },
   text: {
     color: function color(props) {
       return props.white ? _colors["default"].white : _colors["default"].inkLight;

package/build/NavTab/NavTab.js

@@ -139,6 +139,8 @@ var NavTab = /*#__PURE__*/function (_React$Component) {
         className: classes.navItem
       }), item.text, " ", /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "arrowDown",
+        width: 18,
+        height: 18,
         className: "".concat(classes.arrow).concat(item.selected ? " ".concat(classes.arrowUp) : ''),
         colors: blue ? [_colors["default"].white] : [_colors["default"].grey900]
       }));

package/build/Provider/Provider.js

@@ -0,0 +1,89 @@
+"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"] = exports.AtomicContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _usePrevious = _interopRequireDefault(require("./usePrevious"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var AtomicContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.AtomicContext = AtomicContext;
+
+var loadSprite = function loadSprite(url) {
+  fetch(url).then(function (res) {
+    return res.text();
+  }).then(function (data) {
+    var div = document.createElement('div');
+    div.style.display = 'none';
+    div.innerHTML = data;
+    document.body.insertBefore(div, document.body.firstChild);
+  })["catch"](console.log);
+};
+
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect; // eslint-disable-next-line react/prop-types
+
+function AtomicProvider(_ref) {
+  var data = _ref.data,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)(_objectSpread({
+    iconsUrl: '',
+    iconsPath: '',
+    iconsPrefix: 'atomic'
+  }, data)),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var valueRef = (0, _react.useRef)();
+  var prevData = (0, _usePrevious["default"])(data);
+  useIsomorphicLayoutEffect(function () {
+    valueRef.current = value;
+  }, [value]);
+  useIsomorphicLayoutEffect(function () {
+    if (prevData && !(0, _isEqual["default"])(prevData, data)) {
+      setValue(_objectSpread(_objectSpread({}, valueRef.current), data));
+    }
+  }, [data, prevData]);
+  useIsomorphicLayoutEffect(function () {
+    if (value.iconsUrl) loadSprite(value.iconsUrl);
+  }, [value.iconsUrl]);
+  return /*#__PURE__*/_react["default"].createElement(AtomicContext.Provider, {
+    value: value
+  }, children);
+}
+
+;
+var _default = AtomicProvider;
+exports["default"] = _default;

package/build/Provider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Provider = _interopRequireDefault(require("./Provider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _Provider["default"];
+exports["default"] = _default;

package/build/Provider/useAtomic.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _Provider = require("./Provider");
+
+var useAtomic = function useAtomic() {
+  return (0, _react.useContext)(_Provider.AtomicContext);
+};
+
+var _default = useAtomic;
+exports["default"] = _default;

package/build/Provider/usePrevious.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var usePrevious = function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  }, []);
+  return ref.current;
+};
+
+var _default = usePrevious;
+exports["default"] = _default;

package/build/SlideDown/SlideDown.js

@@ -193,9 +193,12 @@ var SlideDown = /*#__PURE__*/function (_React$Component) {
         iconName: "arrowDown",
         colors: [getIconColor()],
         className: classes.icon,
+        width: 18,
+        height: 18,
         style: {
           transform: toggled ? 'rotate(180deg)' : ''
-        }
+        },
+        testId: "slidedown__arrow-down"
       })))), expanded && /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.content, " ").concat(toggled ? classes.show : classes.hide)
       }, children));

package/build/SlideDown/SlideDown.test.js

@@ -25,7 +25,7 @@ var reduceClasses = function reduceClasses(prev, curr) {
 };
 
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
-describe("SlideDown", function () {
+describe('SlideDown', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_SlideDown["default"], {
       classes: classes,
@@ -46,14 +46,20 @@ describe("SlideDown", function () {
       classes: classes,
       title: "Title"
     }));
-    expect(wrapper.find('.button span').prop('style')).toEqual({
-      "transform": "rotate(180deg)"
+    expect(wrapper.find({
+      'data-testid': 'slidedown__arrow-down'
+    }).prop('style')).toEqual({
+      transform: 'rotate(180deg)',
+      transition: '0.3s all'
     });
     wrapper.setState({
       toggled: false
     });
-    expect(wrapper.find('.button span').prop('style')).toEqual({
-      "transform": ""
+    expect(wrapper.find({
+      'data-testid': 'slidedown__arrow-down'
+    }).prop('style')).toEqual({
+      transform: '',
+      transition: '0.3s all'
     });
   });
   it('shows a Tag on the title', function () {
@@ -117,13 +123,13 @@ describe("SlideDown", function () {
     expect(wrapper.find(_Icon["default"]).props().colors).toEqual([_colors["default"].textLink]);
   });
 });
-describe("SlideDownJSS", function () {
+describe('SlideDownJSS', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });
-describe("SlideDown styles", function () {
+describe('SlideDown styles', function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });

package/build/Tip/Tip.test.js

@@ -23,14 +23,14 @@ describe("Tip", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes
-    }));
+    }, "Testing"));
     expect(wrapper).toMatchSnapshot();
   });
   it('has the right theme', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes,
       theme: "info"
-    }));
+    }, "Testing"));
     expect(wrapper.find('.info').length).toBe(1);
     expect(wrapper.find('.warning').length).toBe(0);
     wrapper.setProps({
@@ -42,7 +42,7 @@ describe("Tip", function () {
   it('has an icon', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
       classes: classes,
-      icon: "search"
+      icon: true
     }));
     expect(wrapper.find('.icon').length).toBe(1);
   });

package/build/index.js

@@ -116,6 +116,8 @@ var _spacing = _interopRequireDefault(require("./subatomic/spacing"));
 
 var _WindowSize = _interopRequireDefault(require("./WindowSize"));
 
+var _Provider = _interopRequireDefault(require("./Provider"));
+
 var tokens = _interopRequireWildcard(require("./tokens"));
 
 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); }
@@ -189,5 +191,6 @@ module.exports = {
   shadows: _shadows["default"],
   spacing: _spacing["default"],
   WindowSize: _WindowSize["default"],
-  tokens: tokens
+  tokens: tokens,
+  AtomicProvider: _Provider["default"]
 };

package/build/subatomic/icons/occDart.js

@@ -7,6 +7,8 @@ exports.occDartBlue = exports.occDartWhite = exports.occDartGrey = exports.occDa
 
 var _colors = _interopRequireDefault(require("../colors"));
 
+var _tokens = require("../../tokens");
+
 var _iconSizes = _interopRequireDefault(require("../iconSizes"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -17,10 +19,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var brand = _tokens.colors.icon.brand;
 var ink = _colors["default"].ink,
     inkLight = _colors["default"].inkLight,
-    white = _colors["default"].white,
-    brand = _colors["default"].brand;
+    white = _colors["default"].white;
 
 var _icon = function icon(color) {
   return "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t\t viewBox=\"0 0 60 60\" style=\"enable-background:new 0 0 60 60;\" xml:space=\"preserve\">\n\t<path fill=\"".concat(color, "\" d=\"M44.5,19.9l6.9-1.3c0,0,1.3-0.2,3-1.3l5.4-4.1c0,0,0.8-0.9-1-1l-8.1-0.5c0,0-0.5,0-0.6,0.6c0,0,0.1,1-0.9,2\n\t\tl-5.4,5.4C43.7,19.7,43.7,20,44.5,19.9z\"/>\n\t<path fill=\"").concat(color, "\" d=\"M40.2,15.5l1.2-6.9c0,0,0.2-1.3,1.3-3l4.1-5.4c0,0,0.9-0.8,1.1,1l0.5,8.1c0,0,0,0.5-0.6,0.6c0,0-1-0.1-2,0.9\n\t\tl-5.4,5.4C40.4,16.3,40.1,16.4,40.2,15.5z\"/>\n\t<path fill=\"").concat(color, "\" d=\"M44.8,19.2c-0.1-0.1-0.2-0.2-0.3-0.3l-0.6,0.6l0,0l-2.1,2.1c-0.3,0.3-0.3,0.8-0.1,1.1c3.2,4.3,4.7,9.9,3.7,15.8\n\t\tc-1.5,8.8-8.7,15.5-17.5,16.7C14.6,57,3.3,45.9,4.7,32.7c0.9-8.6,8.8-16.8,17.3-18.1c5.7-0.8,11.1,0.7,15.3,3.7\n\t\tc0.3,0.3,0.8,0.2,1.1-0.1l2.7-2.7l0,0c-0.1-0.1-0.2-0.2-0.4-0.3c-5.4-4.2-12.5-6.4-20.1-5C10.4,12,2.2,20.1,0.4,30.3\n\t\tc-3.1,17.3,11.9,32.3,29.2,29.2c10.3-1.8,18.5-9.9,20.2-20.2C51.2,31.7,49.1,24.6,44.8,19.2z\"/>\n\t<path fill=\"").concat(color, "\" d=\"M37.4,26.1l-2.1,2.1c-0.3,0.3-0.3,0.7-0.1,1c1.1,1.8,1.6,4,1.5,6.3c-0.3,5.7-4.8,10.4-10.5,10.9\n\t\tC19,47,13,41,13.6,33.8c0.5-5.7,5.2-10.2,10.9-10.5c2.3-0.1,4.5,0.4,6.3,1.5c0.3,0.2,0.7,0.1,1-0.1l2.1-2.1c0.4-0.4,0.3-1.1-0.2-1.4\n\t\tc-2.7-1.7-5.9-2.7-9.4-2.5c-8.5,0.4-15.3,7.5-15.4,16C9,43.7,16.3,51,25.2,51c8.5,0,15.7-6.8,16-15.3c0.2-3.5-0.8-6.7-2.5-9.4\n\t\tC38.4,25.8,37.8,25.7,37.4,26.1z\"/>\n\t<path fill=\"").concat(color, "\" d=\"M30.9,32.3l-2.6,1.2c-0.4,0.2-0.6,0.6-0.5,1c0.1,0.3,0.1,0.7,0,1.1c-0.2,1-1.1,1.9-2.2,2\n\t\tc-1.8,0.3-3.4-1.3-3.1-3.1c0.2-1.1,1-1.9,2.1-2.2c0.4-0.1,0.7-0.1,1.1,0s0.8-0.1,0.9-0.5l1.2-2.6c0.2-0.5,0-1-0.5-1.2\n\t\tc-1-0.3-2.2-0.4-3.4-0.2c-3.1,0.5-5.6,3.1-5.9,6.3c-0.5,4.4,3,8.2,7.4,8.1c3.7-0.1,6.7-3,7-6.6c0.1-1,0-1.9-0.3-2.7\n\t\tC31.9,32.3,31.4,32.1,30.9,32.3z\"/>\n\t</svg>");
@@ -58,7 +60,7 @@ exports.occDartWhite = occDartWhite;
 
 var occDartBlue = _objectSpread(_objectSpread({}, sharedProperties), {}, {
   icon: function icon() {
-    return _icon(brand);
+    return _icon(brand["default"]);
   }
 });
 

package/build/subatomic/icons/occHorizontal.js

@@ -7,6 +7,8 @@ exports.occHorizontalBlue = exports.occHorizontalWhite = exports.occHorizontalGr
 
 var _colors = _interopRequireDefault(require("../colors"));
 
+var _tokens = require("../../tokens");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -15,10 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var brand = _tokens.colors.icon.brand;
 var ink = _colors["default"].ink,
     inkLight = _colors["default"].inkLight,
-    white = _colors["default"].white,
-    brand = _colors["default"].brand;
+    white = _colors["default"].white;
 
 var _icon = function icon(color) {
   return "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n         viewBox=\"0 0 300 70\" style=\"enable-background:new 0 0 300 70;\" xml:space=\"preserve\">\n    <path fill=\"".concat(color, "\" d=\"M49,23.9l7.6-1.4c0,0,1.5-0.2,3.3-1.4l6-4.6c0,0,0.9-1-1.1-1.2l-8.9-0.5c0,0-0.6,0-0.7,0.7c0,0,0.2,1.1-1,2.2\n        l-5.9,5.9C48.2,23.7,48.1,24,49,23.9z\"/>\n    <path fill=\"").concat(color, "\" d=\"M44.2,19.1l1.4-7.6c0,0,0.2-1.5,1.4-3.3l4.6-6c0,0,1-0.9,1.2,1.1l0.5,8.9c0,0,0,0.6-0.7,0.7c0,0-1.1-0.2-2.2,1\n        l-6,5.9C44.4,19.9,44.1,20,44.2,19.1z\"/>\n    <path fill=\"").concat(color, "\" d=\"M49.3,23.1c-0.1-0.1-0.2-0.2-0.3-0.3l-0.7,0.7l0,0L46,25.8c-0.3,0.3-0.4,0.9-0.1,1.2c3.5,4.7,5.2,10.9,4,17.4\n        c-1.7,9.6-9.5,17.1-19.3,18.4C16,64.7,3.6,52.5,5.1,37.9c1-9.5,9.7-18.5,19.1-19.9c6.3-0.9,12.2,0.7,16.8,4.1\n        c0.4,0.3,0.9,0.2,1.3-0.1l3-3l0,0c-0.1-0.1-0.3-0.2-0.4-0.3c-5.9-4.7-13.7-7-22.1-5.5c-11.3,2-20.3,10.9-22.3,22.2\n        c-3.4,19.1,13.1,35.5,32.2,32.2c11.3-2,20.3-11,22.2-22.3C56.4,36.9,54,29,49.3,23.1z\"/>\n    <path fill=\"").concat(color, "\" d=\"M41.1,30.7L38.8,33c-0.3,0.3-0.4,0.7-0.1,1.1c1.2,2,1.8,4.4,1.7,7c-0.3,6.3-5.3,11.5-11.6,12\n        c-7.9,0.7-14.6-5.9-13.9-13.8C15.6,33,20.7,28,27,27.7c2.5-0.1,4.9,0.5,7,1.7c0.4,0.2,0.8,0.1,1.1-0.1l2.3-2.3\n        c0.4-0.4,0.4-1.2-0.2-1.5c-3-1.9-6.5-2.9-10.3-2.7c-9.4,0.3-16.9,8.1-17,17.5c-0.1,9.8,8,17.8,17.8,17.8c9.4,0,17.2-7.5,17.7-16.9\n        c0.2-3.8-0.9-7.4-2.8-10.4C42.3,30.3,41.6,30.2,41.1,30.7z\"/>\n    <path fill=\"").concat(color, "\" d=\"M34,37.5l-2.9,1.3c-0.4,0.2-0.6,0.6-0.6,1.1c0.1,0.4,0.1,0.8,0,1.2c-0.3,1.2-1.2,2.1-2.4,2.3\n        c-2,0.3-3.8-1.4-3.4-3.4c0.2-1.2,1.1-2.1,2.3-2.4c0.4-0.1,0.8-0.1,1.2,0c0.4,0.1,0.9-0.1,1-0.5l1.3-2.9c0.2-0.5,0-1.1-0.6-1.3\n        c-1.2-0.4-2.4-0.5-3.7-0.2c-3.4,0.6-6.1,3.4-6.5,6.9c-0.6,4.9,3.3,9,8.1,8.9c4-0.1,7.4-3.3,7.7-7.3c0.1-1.1,0-2.1-0.3-3\n        C35.1,37.5,34.5,37.3,34,37.5z\"/>\n    <path fill=\"").concat(color, "\" d=\"M89.8,43.2c0,6.4-4.4,11.5-11.5,11.5s-11.5-5.1-11.5-11.5c0-6.3,4.4-11.5,11.4-11.5S89.8,36.8,89.8,43.2z\n         M72.3,43.2c0,3.4,2,6.5,6,6.5s6-3.1,6-6.5c0-3.3-2.3-6.5-6-6.5C74.3,36.6,72.3,39.8,72.3,43.2z\"/>\n    <path fill=\"").concat(color, "\" d=\"M104,54.8c-6.4,0-11.8-3.8-11.8-11.7s5.3-11.7,11.8-11.7c3.1,0,5.6,0.9,8,3.3l-3.5,3.6\n        c-1.3-1.2-2.9-1.7-4.4-1.7c-3.7,0-6.4,2.7-6.4,6.5c0,4.2,2.9,6.4,6.3,6.4c1.7,0,3.5-0.5,4.8-1.8l3.7,3.6\n        C110,53.9,107.3,54.8,104,54.8z\"/>\n    <path fill=\"").concat(color, "\" d=\"M125.5,54.8c-6.4,0-11.8-3.8-11.8-11.7s5.3-11.7,11.8-11.7c3.1,0,5.6,0.9,8,3.3l-3.5,3.6\n        c-1.3-1.2-2.9-1.7-4.4-1.7c-3.7,0-6.4,2.7-6.4,6.5c0,4.2,2.9,6.4,6.3,6.4c1.7,0,3.5-0.5,4.8-1.8l3.7,3.6\n        C131.4,53.9,128.7,54.8,125.5,54.8z\"/>\n    <path fill=\"").concat(color, "\" d=\"M151.1,42.3c0-2.9-1.5-5.6-4.5-5.6s-4.7,2.6-4.7,5.6v11.8h-5.5v-22h5.1l0.4,2.7c1.2-2.2,3.7-3,5.8-3\n        c2.6,0,5.3,1.1,6.6,4.1c2-3.1,4.5-4,7.4-4c6.3,0,9.4,3.8,9.4,10.5v11.9h-5.5v-12c0-2.9-1.2-5.4-4.2-5.4s-4.8,2.6-4.8,5.5v11.8h-5.5\n        V42.3z\"/>\n    <path fill=\"").concat(color, "\" d=\"M181.3,43.6c0,3.4,1.8,5.9,5.3,5.9c3.4,0,5.7-2.8,5.7-6.2V32.1h5.4v22.1h-4.9l-0.4-3c-2.3,2.2-4.4,3.3-7.5,3.3\n        c-5.3,0-9.2-4-9.2-10.8V32.1h5.5L181.3,43.6L181.3,43.6z\"/>\n    <path fill=\"").concat(color, "\" d=\"M218.8,42.6c0-3.4-1.8-5.9-5.3-5.9c-3.4,0-5.7,2.8-5.7,6.2v11.3h-5.4V32.1h4.9l0.4,3c2.2-2.2,4.5-3.3,7.3-3.3\n        c5.2,0,9.4,3.9,9.4,10.8v11.6h-5.5L218.8,42.6L218.8,42.6z\"/>\n    <path fill=\"").concat(color, "\" d=\"M252,54.2h-5.1l-0.4-3c-1.7,2.6-4.4,3.5-7.1,3.5c-6.5,0-11.4-4.3-11.4-11.5c0-7.6,4.8-11.5,11.3-11.5\n        c2.3,0,6,1.3,7.3,3.5V22.9h5.5v31.3H252z M233.5,43.1c0,3.8,2.8,6.5,6.3,6.5s6.4-2.5,6.4-6.5c0-3.8-3-6.4-6.4-6.4\n        C236.2,36.7,233.5,39.1,233.5,43.1z\"/>\n    <path fill=\"").concat(color, "\" d=\"M259.5,22.7c1.6,0,3.2,1,3.2,3.2c0,2.1-1.6,3.2-3.2,3.2s-3.2-1.1-3.2-3.2C256.3,23.7,257.9,22.7,259.5,22.7z\n         M256.7,54.2h5.5V32h-5.5V54.2z\"/>\n    <path fill=\"").concat(color, "\" d=\"M289.9,32.1v22.1h-5.2l-0.3-3.2c-1.3,2.6-4.8,3.9-7.3,3.9c-6.5,0-11.3-4-11.3-11.7c0-7.6,5-11.5,11.4-11.5\n        c3,0,5.9,1.3,7.1,3.6l0.2-3h5.4V32.1z M271.4,43.1c0,4.2,2.9,6.7,6.6,6.7c4.3,0,6.5-3.4,6.5-6.7s-2.2-6.7-6.5-6.7\n        C274.3,36.4,271.4,38.9,271.4,43.1z\"/>\n    <path fill=\"").concat(color, "\" d=\"M300,54.2h-5.4V22.9h5.4V54.2z\"/>\n    </svg>");
@@ -56,7 +58,7 @@ exports.occHorizontalWhite = occHorizontalWhite;
 
 var occHorizontalBlue = _objectSpread(_objectSpread({}, sharedProperties), {}, {
   icon: function icon() {
-    return _icon(brand);
+    return _icon(brand["default"]);
   }
 });
 

package/build/subatomic/icons/occLogo.js

@@ -7,6 +7,8 @@ exports.occLogoBlue = exports.occLogoWhite = exports.occLogoGrey = exports.occLo
 
 var _colors = _interopRequireDefault(require("../colors"));
 
+var _tokens = require("../../tokens");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -15,10 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var brand = _tokens.colors.icon.brand;
 var ink = _colors["default"].ink,
     inkLight = _colors["default"].inkLight,
-    white = _colors["default"].white,
-    brand = _colors["default"].brand;
+    white = _colors["default"].white;
 
 var _icon = function icon(color) {
   return "<svg width=\"82\" height=\"32\" viewBox=\"0 0 82 33\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path id=\"Vector\" d=\"M75.3501 23.1395C78.5792 23.1395 81.139 21.1507 81.6021 18.2058L77.8116 17.998C77.4785 19.1331 76.454 19.8046 75.2486 19.8046C73.4818 19.8046 72.3018 18.4872 72.3018 16.4728C72.3018 14.4584 73.4818 13.1411 75.2486 13.1411C76.454 13.1411 77.4785 13.8125 77.8116 14.9476L81.6021 14.7398C81.1422 11.795 78.5792 9.80615 75.3501 9.80615C71.3787 9.80615 68.4066 12.5943 68.4066 16.4696C68.4066 20.3449 71.3787 23.1331 75.3501 23.1331V23.1395ZM44.2453 19.8333C42.4785 19.8333 41.2985 18.516 41.2985 16.476C41.2985 14.436 42.4785 13.1443 44.2453 13.1443C46.0122 13.1443 47.1414 14.4616 47.1414 16.476C47.1414 18.4904 45.9614 19.8333 44.2453 19.8333ZM44.2453 23.1651C48.1406 23.1651 51.0335 20.3257 51.0335 16.476C51.0335 12.6263 48.1374 9.81255 44.2453 9.81255C40.3533 9.81255 37.4033 12.6519 37.4033 16.476C37.4033 20.3002 40.3247 23.1651 44.2453 23.1651ZM60.0547 23.1651C63.4868 23.1651 66.1259 20.8405 66.3828 17.6655L62.643 17.4576C62.4115 18.9029 61.3108 19.8333 59.9531 19.8333C58.1863 19.8333 57.0064 18.516 57.0064 16.476C57.0064 14.436 58.1863 13.1443 59.9531 13.1443C61.3361 13.1443 62.4115 14.0492 62.643 15.4432L66.3828 15.2354C66.1259 12.1115 63.4868 9.81255 60.0547 9.81255C56.0833 9.81255 53.1111 12.6007 53.1111 16.476C53.1111 20.3513 56.0833 23.1651 60.0547 23.1651Z\" fill=\"".concat(color, "\"/>\n        <path id=\"Vector_2\" d=\"M17.2081 13.456C16.799 13.2738 16.3485 13.1683 15.8759 13.1683C14.0615 13.1683 12.5865 14.6551 12.5865 16.484C12.5865 18.313 14.0615 19.7998 15.8759 19.7998C17.6903 19.7998 19.1653 18.313 19.1653 16.484C19.1653 16.0044 19.0638 15.5536 18.8798 15.1411C17.8299 15.7326 16.0979 16.711 16.0979 16.711C15.8188 16.8805 15.4826 16.5352 15.6507 16.2602L17.2081 13.456ZM31.736 6.33533V2.03477C29.4807 4.17386 23.2413 10.0763 20.6815 12.5C21.5665 13.5839 22.1026 14.9716 22.1026 16.484C22.1026 19.9436 19.3112 22.7574 15.8791 22.7574C12.447 22.7574 9.65559 19.9436 9.65559 16.484C9.65559 13.0244 12.447 10.2106 15.8791 10.2106C17.3794 10.2106 18.7561 10.7478 19.8314 11.6431L30.2134 0.5H25.947C24.5387 0.5 23.3079 1.245 22.6069 2.36091C16.8973 -0.446443 9.67779 0.186651 4.65967 5.18106C-3.33697 13.1715 -0.662965 27.0132 9.78881 31.301C15.5809 33.7726 22.7021 32.3273 27.089 27.7902C31.5203 23.3521 32.7859 16.209 30.2578 10.4824C30.1468 10.2138 30.0231 9.95484 29.8994 9.69584C31.0032 8.98921 31.736 7.7486 31.736 6.33533ZM24.7639 25.4432C19.9646 30.3641 11.7904 30.3641 6.98793 25.4432C2.1062 20.6055 2.1062 12.3657 6.98793 7.52478C10.9561 3.45763 17.2272 2.7542 21.9947 5.41127V8.98601C20.3294 7.60152 18.1978 6.77018 15.8759 6.77018C10.5628 6.77018 6.23933 11.1283 6.23933 16.484C6.23933 21.8397 10.5628 26.1978 15.8759 26.1978C21.189 26.1978 25.5125 21.8397 25.5125 16.484C25.5125 14.1435 24.6878 11.9948 23.3143 10.3161H26.8606C29.4965 15.1219 28.7987 21.4432 24.7639 25.4432Z\" fill=\"").concat(color, "\"/>\n    </svg>");
@@ -56,7 +58,7 @@ exports.occLogoWhite = occLogoWhite;
 
 var occLogoBlue = _objectSpread(_objectSpread({}, sharedProperties), {}, {
   icon: function icon() {
-    return _icon(brand);
+    return _icon(brand["default"]);
   }
 });