@spothero/ui 15.0.0-beta.1 → 15.0.0-beta.3

package/.eslintignore

@@ -3,4 +3,5 @@ v2
 backlog
 styles
 dist
-**/fe-icons/**/*
+**/fe-icons/**/*
+**/fe-ui/**/*

package/README.md

@@ -65,7 +65,7 @@ This will spin up a Storybook instance as well as open the Cypress app. The reas
 1. Create a directory in `src` with the same name as the component.
 1. Create the properly named component `.jsx` and `.scss` files for the component. Ensure that the Sass file is a partial (starts with `_`, i.e. `_Foo.scss`) so that it doesn't get compiled separately.
 1. Add the Sass partial import to `src/_index.scss`.
-1. Add the React component export to `src/index.js`.
+1. Add the React component export to `src/index.js.bak`.
 1. Document all PropTypes and public methods accordingly so that they show up in the Storybook documentation properly.
 1. Add a `/stories` directory that has any/all usage examples for the component functionality. Follow the conventions outlined in the other components to do this.
 1. Submit a pull request with your changes.
@@ -94,7 +94,7 @@ File changes should mimic the following:
 ...
 ```
 
-*fe-ui/src/index.js*
+*fe-ui/src/index.js.bak*
 ```javascript
 ...
 import Foo from './Foo/Foo';

package/backlog/Chart/Chart.js

@@ -47,7 +47,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chartist = _interopRequireDefault(require("chartist"));
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 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); }
 
@@ -156,7 +156,7 @@ var Chart = /*#__PURE__*/function (_Component) {
             events = _this$props3.events;
 
         if (tooltip && tooltip.appendToBody) {
-          _utils.DOMUtils.remove('.chartist-tooltip');
+          _dom.default.remove('.chartist-tooltip');
         }
 
         (0, _forEach.default)(events, function (_ref2) {

package/backlog/DateTime/DatePicker.js

@@ -47,7 +47,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _calendar = _interopRequireDefault(require("@spothero/icons/calendar"));
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
 
@@ -76,7 +76,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
     (0, _classCallCheck2.default)(this, DatePicker);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_onBodyClick", function (evt) {
-      if ((!_utils.DOMUtils.parent(evt.target, 'FormElement-control') || !_utils.DOMUtils.parent(evt.target, ".DatePicker-".concat(_this.props.id))) && !_utils.DOMUtils.parent(evt.target, ".".concat(_this._TETHER_CLASS))) {
+      if ((!_dom.default.parent(evt.target, 'FormElement-control') || !_dom.default.parent(evt.target, ".DatePicker-".concat(_this.props.id))) && !_dom.default.parent(evt.target, ".".concat(_this._TETHER_CLASS))) {
         _this.setState({
           showCalendar: false
         });
@@ -135,7 +135,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         _ssrWindow.document.body.addEventListener('touchstart', this._onBodyClick);
 
         if (useTetherShim) {
-          _utils.DOMUtils.addClass('html', 'DatePicker-tether-shim-open');
+          _dom.default.addClass('html', 'DatePicker-tether-shim-open');
         }
       } else {
         this._removeBodyClickListener();
@@ -158,7 +158,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       _ssrWindow.document.body.removeEventListener('touchstart', this._onBodyClick);
 
       if (this.props.useTetherShim) {
-        _utils.DOMUtils.removeClass('html', 'DatePicker-tether-shim-open');
+        _dom.default.removeClass('html', 'DatePicker-tether-shim-open');
       }
     }
     /**

package/backlog/DateTime/DatePickerCalendar.js

@@ -41,7 +41,7 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _reactDayPicker = _interopRequireWildcard(require("react-day-picker"));
 
-var _utils = require("@spothero/utils");
+var _date = _interopRequireDefault(require("../utils/date"));
 
 var _DatePickerCalendarNavigation = _interopRequireDefault(require("./DatePickerCalendarNavigation"));
 
@@ -91,7 +91,7 @@ var DatePickerCalendar = /*#__PURE__*/function (_Component) {
       var selectedDate = _this.state.selectedDate;
 
       if (!(0, _isEmpty.default)(selectedDate)) {
-        return _reactDayPicker.DateUtils.isSameDay(_utils.DateUtils.getAsDate(selectedDate), day);
+        return _reactDayPicker.DateUtils.isSameDay(_date.default.getAsDate(selectedDate), day);
       } else {
         return null;
       }
@@ -105,12 +105,12 @@ var DatePickerCalendar = /*#__PURE__*/function (_Component) {
       var disableDay = false;
 
       if (disableBefore) {
-        disableDay = _utils.DateUtils.isBefore(day, _utils.DateUtils.getAsDate(disableBefore));
+        disableDay = _date.default.isBefore(day, _date.default.getAsDate(disableBefore));
         isDayDisabled = disableDay;
       }
 
       if (disableAfter && !isDayDisabled) {
-        disableDay = _utils.DateUtils.isAfter(day, _utils.DateUtils.getAsDate(disableAfter));
+        disableDay = _date.default.isAfter(day, _date.default.getAsDate(disableAfter));
         isDayDisabled = disableDay;
       }
 
@@ -150,10 +150,10 @@ var DatePickerCalendar = /*#__PURE__*/function (_Component) {
       var toMonth = null;
 
       if (disableBefore) {
-        var beforeDate = _utils.DateUtils.getAsDate(disableBefore);
+        var beforeDate = _date.default.getAsDate(disableBefore);
 
         if (fromMonth) {
-          if (_utils.DateUtils.isAfter(beforeDate, fromMonth)) {
+          if (_date.default.isAfter(beforeDate, fromMonth)) {
             fromMonth = beforeDate;
           }
         } else {
@@ -164,11 +164,11 @@ var DatePickerCalendar = /*#__PURE__*/function (_Component) {
       }
 
       if (disableAfter) {
-        toMonth = _utils.DateUtils.getAsDate(disableAfter);
+        toMonth = _date.default.getAsDate(disableAfter);
       }
 
       if (selectedDate && overrideInitialMonthWithSelected) {
-        firstMonth = _utils.DateUtils.getAsDate(selectedDate);
+        firstMonth = _date.default.getAsDate(selectedDate);
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {

package/backlog/DateTime/DatePickerCalendarWithRange.js

@@ -47,7 +47,7 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _reactDayPicker = _interopRequireWildcard(require("react-day-picker"));
 
-var _utils = require("@spothero/utils");
+var _date = _interopRequireDefault(require("../utils/date"));
 
 var _DatePickerCalendarNavigation = _interopRequireDefault(require("./DatePickerCalendarNavigation"));
 
@@ -154,8 +154,8 @@ var DatePickerCalendarWithRange = /*#__PURE__*/function (_Component) {
     var _selectedStartDate = props.selectedStartDate,
         _selectedEndDate = props.selectedEndDate;
     _this.state = {
-      selectedStartDate: _selectedStartDate ? _utils.DateUtils.getAsDate(_selectedStartDate) : null,
-      selectedEndDate: _selectedEndDate ? _utils.DateUtils.getAsDate(_selectedEndDate) : null
+      selectedStartDate: _selectedStartDate ? _date.default.getAsDate(_selectedStartDate) : null,
+      selectedEndDate: _selectedEndDate ? _date.default.getAsDate(_selectedEndDate) : null
     };
     return _this;
   }
@@ -179,10 +179,10 @@ var DatePickerCalendarWithRange = /*#__PURE__*/function (_Component) {
       var toMonth = null;
 
       if (disableBefore) {
-        var beforeDate = _utils.DateUtils.getAsDate(disableBefore);
+        var beforeDate = _date.default.getAsDate(disableBefore);
 
         if (fromMonth) {
-          if (_utils.DateUtils.isAfter(beforeDate, fromMonth)) {
+          if (_date.default.isAfter(beforeDate, fromMonth)) {
             fromMonth = beforeDate;
           }
         } else {
@@ -193,7 +193,7 @@ var DatePickerCalendarWithRange = /*#__PURE__*/function (_Component) {
       }
 
       if (disableAfter) {
-        toMonth = _utils.DateUtils.getAsDate(disableAfter);
+        toMonth = _date.default.getAsDate(disableAfter);
       }
 
       if (selectedStartDate && overrideInitialMonthWithSelected) {

package/backlog/DateTime/DateTimeRangePicker.js

@@ -43,7 +43,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _v = _interopRequireDefault(require("uuid/v4"));
 
-var _utils = require("@spothero/utils");
+var _date = _interopRequireDefault(require("../utils/date"));
+
+var _time = _interopRequireDefault(require("../utils/time"));
 
 var _DateTimePicker = _interopRequireDefault(require("./DateTimePicker"));
 
@@ -249,7 +251,7 @@ var DateTimeRangePicker = /*#__PURE__*/function (_Component) {
   }, {
     key: "_getCombinedDate",
     value: function _getCombinedDate(date, time) {
-      return _utils.DateUtils.combineDateAndTime(_utils.DateUtils.getAsMoment(date), _utils.TimeUtils.getAsMoment(time));
+      return _date.default.combineDateAndTime(_date.default.getAsMoment(date), _time.default.getAsMoment(time));
     }
   }, {
     key: "_checkValidity",
@@ -444,9 +446,9 @@ var DateTimeRangePicker = /*#__PURE__*/function (_Component) {
       var overrideInitialEndMonthWithSelected = true; // if the end picker has a date disabled whose month is after the end selected date, make sure the calendar starts with the first selectable month
 
       if (endDate && newDisableEndDateBefore) {
-        var endMoment = _utils.DateUtils.getAsMoment(endDate);
+        var endMoment = _date.default.getAsMoment(endDate);
 
-        var endBeforeMoment = _utils.DateUtils.getAsMoment(newDisableEndDateBefore);
+        var endBeforeMoment = _date.default.getAsMoment(newDisableEndDateBefore);
 
         overrideInitialEndMonthWithSelected = endMoment.isAfter(endBeforeMoment);
       }

package/backlog/DateTime/TimePicker.js

@@ -45,7 +45,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _clock = _interopRequireDefault(require("@spothero/icons/clock"));
 
-var _utils = require("@spothero/utils");
+var _time = _interopRequireDefault(require("../utils/time"));
 
 var _Select = _interopRequireDefault(require("../Select/Select"));
 
@@ -98,11 +98,11 @@ var TimePicker = /*#__PURE__*/function (_Component) {
       timesParams.ignoreAfter = (0, _moment.default)(disableAfter, 'hh:mm A').diff(dayStart, 'minutes');
     }
 
-    _this._times = (0, _map.default)(_context = _utils.TimeUtils.getTimes(timesParams)).call(_context, function (_ref2) {
+    _this._times = (0, _map.default)(_context = _time.default.getTimes(timesParams)).call(_context, function (_ref2) {
       var formatted = _ref2.formatted;
       return {
         value: formatted,
-        label: displayFormat ? _utils.TimeUtils.getAsMoment(formatted).format(displayFormat) : formatted
+        label: displayFormat ? _time.default.getAsMoment(formatted).format(displayFormat) : formatted
       };
     });
     return _this;

package/backlog/ErrorBoundary/ErrorBoundary.js

@@ -35,8 +35,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _utils = require("@spothero/utils");
-
 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; }
@@ -45,6 +43,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+// import SentryUtils from '@spothero/utils/sentry';
 var ErrorBoundary = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ErrorBoundary, _Component);
 
@@ -82,13 +81,12 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
         onError(error, info);
       }
 
-      if (reportToSentry) {
-        _utils.SentryUtils.addData(info);
-
-        _utils.SentryUtils.sendMessage({
-          message: error.message,
-          level: 'error'
-        });
+      if (reportToSentry) {//TODO: breaking change. pass function prop that invokes these in parent application
+        // SentryUtils.addData(info);
+        // SentryUtils.sendMessage({
+        //     message: error.message,
+        //     level: 'error',
+        // });
       }
     }
   }, {

package/backlog/Flyout/Flyout.js

@@ -43,7 +43,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 var _Button = _interopRequireDefault(require("../v1/components/Button/Button"));
 
@@ -96,10 +96,10 @@ var Flyout = /*#__PURE__*/function (_Component) {
         _this2._isAnimating = true;
 
         if (!isBackgroundScrollable) {
-          _utils.DOMUtils.addClass('html', 'Flyout-no-scroll');
+          _dom.default.addClass('html', 'Flyout-no-scroll');
         }
 
-        _utils.DOMUtils.addClass(_this2._flyout, 'Flyout-active');
+        _dom.default.addClass(_this2._flyout, 'Flyout-active');
 
         window.transitionEnd(_this2._flyout).bind(function () {
           window.transitionEnd(_this2._flyout).unbind();
@@ -115,9 +115,9 @@ var Flyout = /*#__PURE__*/function (_Component) {
   }, {
     key: "_removeClasses",
     value: function _removeClasses() {
-      _utils.DOMUtils.removeClass('html', 'Flyout-open Flyout-no-scroll');
+      _dom.default.removeClass('html', 'Flyout-open Flyout-no-scroll');
 
-      _utils.DOMUtils.removeClass(this._flyout, 'Flyout-active');
+      _dom.default.removeClass(this._flyout, 'Flyout-active');
     }
     /**
      * Hides the Flyout programmatically.

package/backlog/Form/Form.js

@@ -35,7 +35,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _formSerialize = _interopRequireDefault(require("form-serialize"));
 
-var _utils = require("@spothero/utils");
+var _animation = _interopRequireDefault(require("../utils/animation"));
+
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 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); }
 
@@ -93,13 +95,13 @@ var Form = /*#__PURE__*/function (_Component) {
             invalidElementScrollOffset = _this$props.invalidElementScrollOffset; // setTimeout to ensure elements are rendered
 
         setTimeout(function () {
-          var errorField = _utils.DOMUtils.el("#Form-".concat(id, " .FormElement-contains-error"));
+          var errorField = _dom.default.el("#Form-".concat(id, " .FormElement-contains-error"));
 
           var firstInvalid = errorField.length > 0 ? errorField[0] : errorField;
           var yPos = firstInvalid.offsetTop + invalidElementScrollOffset;
           var elToScroll = invalidElementToScroll || document.scrollingElement;
 
-          _utils.AnimationUtils.scrollTo(elToScroll, yPos);
+          _animation.default.scrollTo(elToScroll, yPos);
         }, 0);
       }
     }

package/backlog/GooglePlacesSearchInput/GooglePlacesSearchInput.js

@@ -51,8 +51,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _search = _interopRequireDefault(require("@spothero/icons/search"));
 
-var _utils = require("@spothero/utils");
-
 var _AutoSuggestInput = _interopRequireDefault(require("../AutoSuggestInput/AutoSuggestInput"));
 
 var _TextInputPropTypes = _interopRequireDefault(require("../TextInput/TextInputPropTypes"));
@@ -184,8 +182,7 @@ var GooglePlacesSearchInput = /*#__PURE__*/function (_Component) {
       });
     });
     var googleMaps = props.googleMaps;
-
-    var isBrowser = _utils.EnvironmentUtils.isBrowser();
+    var isBrowser = typeof window !== 'undefined'; //EnvironmentUtils.isBrowser();
 
     _this._suggestionFetch = (0, _throttle.default)(_this._searchSuggestions, 500);
     _this._gmaps = googleMaps;

package/backlog/Notification/Notification.js

@@ -47,7 +47,7 @@ var _heroCar = _interopRequireDefault(require("@spothero/icons/hero-car"));
 
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 var _Button = _interopRequireDefault(require("../v1/components/Button/Button"));
 
@@ -90,7 +90,7 @@ var Notification = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       _ssrWindow.window.setTimeout(function () {
-        _utils.DOMUtils.addClass(_this2._notification, 'Notification-showing');
+        _dom.default.addClass(_this2._notification, 'Notification-showing');
       }, 100);
     }
   }, {
@@ -106,10 +106,10 @@ var Notification = /*#__PURE__*/function (_Component) {
         _ssrWindow.window.clearTimeout(this._hideTimeout);
       }
 
-      _utils.DOMUtils.removeClass(this._notification, 'Notification-showing');
+      _dom.default.removeClass(this._notification, 'Notification-showing');
 
       _ssrWindow.window.setTimeout(function () {
-        _utils.DOMUtils.removeClass(_this3._notification, 'Notification-showing');
+        _dom.default.removeClass(_this3._notification, 'Notification-showing');
 
         if (onHidden) {
           onHidden(_this3.props);

package/backlog/Portal/Portal.js

@@ -39,7 +39,7 @@ var _reactRedux = require("react-redux");
 
 var _ssrWindow = require("ssr-window");
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 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); }
 
@@ -62,14 +62,14 @@ var Portal = /*#__PURE__*/function (_PureComponent) {
     var className = props.className,
         appendTo = props.appendTo;
     _this._EL = _ssrWindow.document.createElement('div');
-    _this._ROOT = (0, _isString.default)(appendTo) ? _utils.DOMUtils.el(appendTo) : appendTo;
+    _this._ROOT = (0, _isString.default)(appendTo) ? _dom.default.el(appendTo) : appendTo;
 
     if ((0, _isArrayLikeObject.default)(_this._ROOT)) {
       _this._ROOT = _this._ROOT[0];
     }
 
     if (className) {
-      _utils.DOMUtils.addClass(_this._EL, className);
+      _dom.default.addClass(_this._EL, className);
     }
 
     return _this;

package/backlog/RenderInBody/RenderInBody.js

@@ -31,7 +31,7 @@ var _reactDom = require("react-dom");
 
 var _reactRedux = require("react-redux");
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 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); }
 
@@ -58,7 +58,7 @@ var RenderInBody = /*#__PURE__*/function (_Component) {
       this._container = document.createElement('div');
 
       if (className) {
-        _utils.DOMUtils.addClass(this._container, className);
+        _dom.default.addClass(this._container, className);
       }
 
       document.body.appendChild(this._container);

package/backlog/Select/Select.js

@@ -49,7 +49,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 var _Loader = _interopRequireDefault(require("../v1/components/Loader/Loader"));
 
@@ -177,9 +177,9 @@ var Select = /*#__PURE__*/function (_Component) {
     value: function _checkIfDisabledSelected() {
       // if a disabled option is selected at first, make it the same color as placeholder as thats typically why its selected
       if ((0, _isEmpty.default)(this._select.value)) {
-        _utils.DOMUtils.addClass(this._select, 'FormElement-item-placeholder');
+        _dom.default.addClass(this._select, 'FormElement-item-placeholder');
       } else {
-        _utils.DOMUtils.removeClass(this._select, 'FormElement-item-placeholder');
+        _dom.default.removeClass(this._select, 'FormElement-item-placeholder');
       }
     }
   }, {

package/backlog/SelectControlled/SelectControlled.js

@@ -47,7 +47,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 var _Loader = _interopRequireDefault(require("../v1/components/Loader/Loader"));
 
@@ -172,9 +172,9 @@ var SelectControlled = /*#__PURE__*/function (_Component) {
     value: function _checkIfDisabledSelected() {
       // if a disabled option is selected at first, make it the same color as placeholder as thats typically why its selected
       if ((0, _isEmpty.default)(this._select.value)) {
-        _utils.DOMUtils.addClass(this._select, 'FormElement-item-placeholder');
+        _dom.default.addClass(this._select, 'FormElement-item-placeholder');
       } else {
-        _utils.DOMUtils.removeClass(this._select, 'FormElement-item-placeholder');
+        _dom.default.removeClass(this._select, 'FormElement-item-placeholder');
       }
     }
   }, {

package/backlog/Tooltip/Tooltip.js

@@ -37,7 +37,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
-var _utils = require("@spothero/utils");
+var _dom = _interopRequireDefault(require("../utils/dom"));
 
 var _Button = _interopRequireDefault(require("../v1/components/Button/Button"));
 
@@ -75,11 +75,11 @@ var Tooltip = /*#__PURE__*/function (_Component) {
           triggerSelector = _this$props.triggerSelector,
           updateOnMove = _this$props.updateOnMove,
           closeOnBodyClick = _this$props.closeOnBodyClick;
-      this._trigger = _utils.DOMUtils.el(triggerSelector);
+      this._trigger = _dom.default.el(triggerSelector);
 
       this._positionTooltip();
 
-      _utils.DOMUtils.addClass(this._container, 'Tooltip-showing');
+      _dom.default.addClass(this._container, 'Tooltip-showing');
 
       if (updateOnMove) {
         this._container.style.position = 'fixed';
@@ -131,7 +131,7 @@ var Tooltip = /*#__PURE__*/function (_Component) {
       var tooltipWidth = this._container.offsetWidth;
       var tooltipHeight = this._container.offsetHeight;
 
-      var _DOMUtils$getDocument = _utils.DOMUtils.getDocumentOffset(this._trigger),
+      var _DOMUtils$getDocument = _dom.default.getDocumentOffset(this._trigger),
           documentTop = _DOMUtils$getDocument.top,
           documentLeft = _DOMUtils$getDocument.left;
 
@@ -194,8 +194,8 @@ var Tooltip = /*#__PURE__*/function (_Component) {
     value: function hide() {
       var _this2 = this;
 
-      if (_utils.DOMUtils.hasClass(this._container, 'Tooltip-showing')) {
-        _utils.DOMUtils.removeClass(this._container, 'Tooltip-showing');
+      if (_dom.default.hasClass(this._container, 'Tooltip-showing')) {
+        _dom.default.removeClass(this._container, 'Tooltip-showing');
 
         setTimeout(function () {
           _this2.props.onHidden();

package/backlog/utils/animation.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ssrWindow = require("ssr-window");
+
+var _isString = _interopRequireDefault(require("lodash/isString"));
+
+var _dom = _interopRequireDefault(require("./dom"));
+
+// t = current time, b = start value, c = change in value, d = duration
+// http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation
+Math.easeInOutQuad = function (t, b, c, d) {
+  /* eslint-disable no-param-reassign, no-mixed-operators */
+  t /= d / 2;
+
+  if (t < 1) {
+    return c / 2 * t * t + b;
+  }
+
+  t--;
+  return -c / 2 * (t * (t - 2) - 1) + b;
+  /* eslint-enable no-param-reassign, no-mixed-operators */
+};
+/**
+ * Utilities for working with animations.
+ * @module AnimationUtils
+ */
+
+
+var AnimationUtils = {
+  /**
+   * Scrolls the specified element to the specified position.
+   * @static
+   * @function scrollTo
+   * @param {String|Element} el - The selector or element to scroll to.
+   * @param {Number} [position=0] - The position to scroll the element to.
+   * @param {Number} [duration=400] - The time (in milliseconds) to scroll.
+   * @param {String} [axis='y'] - The axis to scroll on.
+   * @param {Function} [cb] - A callback function to call when the animation finishes.
+   * @example
+   * AnimationUtils.scrollTo(window, 0, 1000);
+   * @returns {void}
+   */
+  scrollTo: function scrollTo(el) {
+    var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 400;
+    var axis = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'y';
+    var cb = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+    var element = (0, _isString.default)(el) ? _dom.default.el(el) : el;
+    var start = axis === 'y' ? element.scrollTop : element.scrollLeft;
+    var change = position - start;
+    var increment = 20;
+    var currentTime = 0;
+
+    var animateScroll = function animateScroll() {
+      currentTime += increment;
+      var val = Math.easeInOutQuad(currentTime, start, change, duration);
+
+      if (axis === 'y') {
+        element.scrollTop = val;
+      } else {
+        element.scrollLeft = val;
+      }
+
+      if (currentTime < duration) {
+        _ssrWindow.window.setTimeout(animateScroll, increment);
+      } else {
+        if (cb) {
+          cb();
+        }
+      }
+    };
+
+    animateScroll();
+  }
+};
+var _default = AnimationUtils;
+exports.default = _default;