@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.11

package/build/Pager/Pager.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -17,36 +19,38 @@ var _Break = _interopRequireDefault(require("./Break"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { 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); }
-
 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 /** This pager allows the user to navigate between pages with 'Next' and 'Previous' buttons and numerical buttons. */
-var Pager =
-/*#__PURE__*/
-function (_React$Component) {
+var Pager = /*#__PURE__*/function (_React$Component) {
   _inherits(Pager, _React$Component);
 
+  var _super = _createSuper(Pager);
+
   function Pager(props) {
     var _this;
 
     _classCallCheck(this, Pager);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Pager).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
       selected: props.initialPage ? props.initialPage : props.forcePage ? props.forcePage : 1
     };
@@ -125,7 +129,7 @@ function (_React$Component) {
     key: "getPageElement",
     value: function getPageElement(index) {
       var selected = this.state.selected;
-      return _react["default"].createElement(_Page["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_Page["default"], {
         key: index,
         onClick: this.handlePageSelected.bind(null, index),
         selected: selected == index,
@@ -189,7 +193,7 @@ function (_React$Component) {
           }
 
           if (breakLabel && items[items.length - 1] != breakView) {
-            breakView = _react["default"].createElement(_Break["default"], {
+            breakView = /*#__PURE__*/_react["default"].createElement(_Break["default"], {
               key: _index,
               label: breakLabel
             });
@@ -211,20 +215,20 @@ function (_React$Component) {
           nextLabel = _this$props3.nextLabel,
           hideNumbers = _this$props3.hideNumbers,
           className = _this$props3.className;
-      return _react["default"].createElement("ul", {
+      return /*#__PURE__*/_react["default"].createElement("ul", {
         className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
-      }, _react["default"].createElement("li", {
+      }, /*#__PURE__*/_react["default"].createElement("li", {
         className: "".concat(classes.btn, " ").concat(classes.prev).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handlePrevPage
-      }, _react["default"].createElement(_Icon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "arrowDown",
         colors: ['#adb4bb']
-      }), " ", previousLabel), !hideNumbers && this.pagination(), _react["default"].createElement("li", {
+      }), " ", previousLabel), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
         className: "".concat(classes.btn, " ").concat(classes.next).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handleNextPage
-      }, nextLabel, " ", _react["default"].createElement(_Icon["default"], {
+      }, nextLabel, " ", /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "arrowDown",
         colors: ['#adb4bb']
       })));

package/build/Pager/Pager.test.js

@@ -21,22 +21,22 @@ var reduceClasses = function reduceClasses(prev, curr) {
 var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Pager", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('renders the prev and next buttons', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       classes: classes
     }));
     expect(wrapper.find('.prev').length).toBe(1);
-    expect(wrapper.find('.prev').text()).toEqual('<Icon /> Previous');
+    expect(wrapper.find('.prev').text()).toEqual('<Jss(Icon) /> Previous');
     expect(wrapper.find('.next').length).toBe(1);
-    expect(wrapper.find('.next').text()).toEqual('Next <Icon />');
+    expect(wrapper.find('.next').text()).toEqual('Next <Jss(Icon) />');
   });
   it('changes to previous page', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       initialPage: 3,
       classes: classes
     }));
@@ -47,7 +47,7 @@ describe("Pager", function () {
     expect(wrapper.state('selected')).toEqual(2);
   });
   it('changes to next page', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       initialPage: 3,
       classes: classes
     }));
@@ -58,7 +58,7 @@ describe("Pager", function () {
     expect(wrapper.state('selected')).toEqual(4);
   });
   it('renders the pagination', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       pageCount: 3,
       pageRangeDisplayed: 1,
       marginPagesDisplayed: 1,
@@ -67,7 +67,7 @@ describe("Pager", function () {
     expect(wrapper.find('li').length).toBe(5);
   });
   it('changes to a specific page', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       pageCount: 5,
       pageRangeDisplayed: 1,
       marginPagesDisplayed: 1,
@@ -80,7 +80,7 @@ describe("Pager", function () {
     expect(wrapper.state('selected')).toEqual(5);
   });
   it('disables the previous page button', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       initialPage: 1,
       classes: classes
     }));
@@ -91,7 +91,7 @@ describe("Pager", function () {
     expect(wrapper.find('.prev').hasClass('disabled')).toEqual(false);
   });
   it('disables the next page button', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       pageCount: 5,
       initialPage: 5,
       classes: classes
@@ -104,7 +104,7 @@ describe("Pager", function () {
   });
   it('calls the onPageChange function', function () {
     var onPageChange = jest.fn();
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pager["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       onPageChange: onPageChange,
       classes: classes
     }));
@@ -116,7 +116,7 @@ describe("Pager", function () {
 });
 describe("PagerJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], null));
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
     expect(wrapper).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pager matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Pager styles matches the snapshot 1`] = `
+Object {
+  "btn": Object {
+    "& span": Object {
+      "marginBottom": "-2px",
+    },
+    "&:hover": Object {
+      "background": "#ECECEE",
+      "borderColor": "#ECECEE",
+    },
+    "border": "1px solid #bfbfbf",
+    "borderRadius": "5px",
+    "cursor": "pointer",
+    "display": "inline-block",
+    "fontFamily": "'OccText', sans-serif",
+    "outline": "0",
+    "padding": "3px 13px",
+    "transition": "0.3s all",
+  },
+  "disabled": Object {
+    "opacity": "0.4",
+    "pointerEvents": "none",
+  },
+  "next": Object {
+    "& span": Object {
+      "transform": "rotate(-90deg)",
+    },
+    "marginLeft": "15px",
+  },
+  "pager": Object {
+    "color": "#727272",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": "14px",
+    "listStyle": "none",
+    "paddingLeft": "0",
+  },
+  "prev": Object {
+    "& span": Object {
+      "transform": "rotate(90deg)",
+    },
+    "marginRight": "15px",
+  },
+}
+`;
+
+exports[`PagerJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Pager/styles.js

@@ -17,7 +17,7 @@ var _default = {
     paddingLeft: '0',
     fontFamily: _fonts["default"].body,
     color: _colors["default"].grey7,
-    fontSize: '13px'
+    fontSize: '14px'
   },
   btn: {
     display: 'inline-block',

package/build/Pill/Choice/Choice.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -19,35 +21,37 @@ var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { 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); }
-
 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var Choice =
-/*#__PURE__*/
-function (_React$Component) {
+var Choice = /*#__PURE__*/function (_React$Component) {
   _inherits(Choice, _React$Component);
 
+  var _super = _createSuper(Choice);
+
   function Choice(props) {
     var _this;
 
     _classCallCheck(this, Choice);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Choice).call(this, props));
+    _this = _super.call(this, props);
     _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
     return _this;
   }
@@ -69,27 +73,27 @@ function (_React$Component) {
           selected = _this$props2.selected,
           disabled = _this$props2.disabled,
           idPrefix = _this$props2.idPrefix,
+          testId = _this$props2.testId,
           leftIcon = _this$props2.leftIcon,
           rightIcon = _this$props2.rightIcon,
           id = _this$props2.id;
       var iconColor = disabled ? _colors["default"].grey200 : selected ? _colors["default"].prim : _colors["default"].grey900;
-      return _react["default"].createElement("button", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         className: "".concat(classes.pill).concat(selected ? " ".concat(classes.selected) : disabled ? " ".concat(classes.disabled) : ''),
         onClick: this.handleOnClick,
-        id: idPrefix ? "".concat(idPrefix).concat(id) : null
-      }, leftIcon && _react["default"].createElement(_Icon["default"], {
-        className: classes.icon,
+        id: idPrefix ? "".concat(idPrefix).concat(id) : null,
+        "data-testid": testId ? "".concat(testId).concat(id) : null
+      }, leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: leftIcon,
         colors: [iconColor],
         width: _iconSizes["default"].small,
         height: _iconSizes["default"].small
-      }), children && _react["default"].createElement(_Text["default"], {
+      }), children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "span",
         className: classes.text,
         primary: selected,
         disabled: disabled
-      }, children), rightIcon && _react["default"].createElement(_Icon["default"], {
-        className: classes.icon,
+      }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: rightIcon,
         colors: [iconColor],
         width: _iconSizes["default"].small,
@@ -110,7 +114,8 @@ Choice.propTypes = {
   disabled: _propTypes["default"].bool,
   leftIcon: _propTypes["default"].string,
   rightIcon: _propTypes["default"].string,
-  idPrefix: _propTypes["default"].string
+  idPrefix: _propTypes["default"].string,
+  testId: _propTypes["default"].string
 };
 var _default = Choice;
 exports["default"] = _default;

package/build/Pill/Choice/styles.js

@@ -24,6 +24,10 @@ var _default = {
     transition: '0.3s all',
     cursor: 'pointer',
     borderRadius: _spacing["default"].small,
+    maxWidth: '100%',
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 'auto',
     '&:not(:last-child)': {
       marginRight: _spacing["default"].tiny
     },
@@ -44,11 +48,12 @@ var _default = {
     pointerEvents: 'none'
   },
   text: {
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
     marginLeft: _spacing["default"].xTiny,
     marginRight: _spacing["default"].xTiny
-  },
-  icon: {
-    marginBottom: -_spacing["default"].xTiny
   }
 };
 exports["default"] = _default;

package/build/Pill/Group/Group.js

@@ -16,13 +16,15 @@ var Group = function Group(_ref) {
       items = _ref.items,
       selected = _ref.selected,
       onSelect = _ref.onSelect,
-      idPrefix = _ref.idPrefix;
-  return _react["default"].createElement("div", {
+      idPrefix = _ref.idPrefix,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.pillGroup
   }, items.map(function (item, index) {
-    return _react["default"].createElement("button", {
+    return /*#__PURE__*/_react["default"].createElement("button", {
       key: item.id,
       id: idPrefix ? "".concat(idPrefix).concat(item.id) : null,
+      "data-testid": testId ? "".concat(testId).concat(index) : null,
       className: "".concat(classes.pill).concat(selected == item.id ? " ".concat(classes.selected) : item.disabled ? " ".concat(classes.disabled) : ''),
       onClick: selected != item.id ? function () {
         onSelect(item.id, index);
@@ -36,7 +38,8 @@ Group.propTypes = {
   items: _propTypes["default"].array,
   onSelect: _propTypes["default"].func,
   selected: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  idPrefix: _propTypes["default"].string
+  idPrefix: _propTypes["default"].string,
+  testId: _propTypes["default"].string
 };
 var _default = Group;
 exports["default"] = _default;

package/build/Pill/Group/styles.js

@@ -22,15 +22,18 @@ var _default = {
     border: "1px solid ".concat(_colors["default"].grey200),
     color: _colors["default"].ink,
     fontFamily: _fonts["default"].body,
-    fontSize: 14,
+    fontSize: 15,
     fontWeight: 400,
-    lineHeight: '24px',
-    height: 32,
-    padding: 0,
+    lineHeight: "".concat(_spacing["default"].base, "px"),
+    height: _spacing["default"].medium,
+    padding: [0, _spacing["default"].small],
     position: 'relative',
     zIndex: 1,
     outline: 0,
     flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
     transition: '0.3s all',
     cursor: 'pointer',
     '&:first-child': {

package/build/Pill/Pill.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -19,9 +21,9 @@ var _Choice = _interopRequireDefault(require("./Choice"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+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 _typeof(obj) { 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); }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -29,30 +31,34 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 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; }
 
 /** Group of buttons to toggle. */
-var Pill =
-/*#__PURE__*/
-function (_Component) {
+var Pill = /*#__PURE__*/function (_Component) {
   _inherits(Pill, _Component);
 
+  var _super = _createSuper(Pill);
+
   function Pill(props) {
     var _this;
 
     _classCallCheck(this, Pill);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(Pill).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
       status: 'default',
       touched: false,
@@ -128,6 +134,7 @@ function (_Component) {
           disabled = _this$props.disabled,
           lockHeight = _this$props.lockHeight,
           idPrefix = _this$props.idPrefix,
+          testId = _this$props.testId,
           onClick = _this$props.onClick,
           onClose = _this$props.onClose,
           id = _this$props.id,
@@ -136,49 +143,52 @@ function (_Component) {
       var realStatus = status;
       var errorStatus = error && (touched || allowError);
       if (disabled) realStatus = 'disabled';else if (errorStatus) realStatus = 'error';
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.container).concat(realStatus == 'disabled' ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         id: id,
         style: style
-      }, (label || lockHeight) && _react["default"].createElement("div", {
+      }, (label || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.top
-      }, label && _react["default"].createElement("label", {
+      }, label && /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(classes.label, " ").concat(classes.left)
-      }, label)), group ? _react["default"].createElement(_Group["default"], {
+      }, label)), group ? /*#__PURE__*/_react["default"].createElement(_Group["default"], {
         items: group,
         onSelect: this.handleGroupOnSelect,
         selected: selected,
-        idPrefix: idPrefix
-      }) : stack ? _react["default"].createElement("div", {
+        idPrefix: idPrefix,
+        testId: testId
+      }) : stack ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.stackGroup
       }, stack.map(function (pill) {
-        return _react["default"].createElement(_Stack["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
           key: pill.id,
           idPrefix: idPrefix,
           id: pill.id,
+          testId: testId,
           disabled: pill.disabled,
           onClick: onClick ? _this2.handleStackItemOnClick : null,
           onClose: onClose ? _this2.handleStackItemOnClose : null
         }, pill.label);
-      })) : choice ? _react["default"].createElement("div", {
+      })) : choice ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.choiceGroup
       }, choice.map(function (pill) {
-        return _react["default"].createElement(_Choice["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_Choice["default"], {
           key: pill.id,
           idPrefix: idPrefix,
           id: pill.id,
+          testId: testId,
           disabled: pill.disabled,
           selected: pill.selected,
           onClick: _this2.handleChoiceOnSelect,
           leftIcon: pill.leftIcon,
           rightIcon: pill.rightIcon
         }, pill.label);
-      })) : null, (assistiveText || lockHeight) && _react["default"].createElement("div", {
+      })) : null, (assistiveText || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
-      }, assistiveText && _react["default"].createElement("label", {
+      }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
         className: "".concat(classes.label, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.assistiveText)
-      }, realStatus == 'error' ? _react["default"].createElement(_Icon["default"], {
-        iconName: "warning",
+      }, realStatus == 'error' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "warningSolid",
         width: 14,
         height: 14,
         className: classes.errorIcon
@@ -254,6 +264,9 @@ Pill.propTypes = {
 
   /** Prefix for the id of every pill. If you don't specify a prefix they will not have an id. */
   idPrefix: _propTypes["default"].string,
+
+  /** Data test id used for automated testing.  */
+  testId: _propTypes["default"].string,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object