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

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

package/build/Pill/Pill.test.js

@@ -35,21 +35,21 @@ var pills = [{
 describe("Pill", function () {
   // Group tests
   it('matches the group snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       group: pills,
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('shows four buttons', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       group: pills,
       classes: classes
     }));
     expect(wrapper.find('button').length).toBe(4);
   });
   it('selects the right options', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       group: pills,
       classes: classes
     }));
@@ -59,7 +59,7 @@ describe("Pill", function () {
   });
   it('calls the onChange function', function () {
     var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       group: pills,
       onChange: onChange,
       classes: classes
@@ -69,14 +69,14 @@ describe("Pill", function () {
   }); // Stack tests
 
   it('matches the stack snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       stack: pills,
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('shows four buttons', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       stack: pills,
       classes: classes
     }));
@@ -84,7 +84,7 @@ describe("Pill", function () {
   });
   it('calls the onClick function', function () {
     var onClick = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       stack: pills,
       onClick: onClick,
       classes: classes
@@ -94,7 +94,7 @@ describe("Pill", function () {
   });
   it('calls the onClose function', function () {
     var onClose = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       stack: pills,
       onClose: onClose,
       classes: classes
@@ -104,14 +104,14 @@ describe("Pill", function () {
   }); // Choice tests
 
   it('matches the choice snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       choice: pills,
       classes: classes
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('shows four buttons', function () {
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       choice: pills,
       classes: classes
     }));
@@ -119,7 +119,7 @@ describe("Pill", function () {
   });
   it('calls the onChange function', function () {
     var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)(_react["default"].createElement(_Pill["default"], {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pill["default"], {
       choice: pills,
       onChange: onChange,
       classes: classes
@@ -130,7 +130,7 @@ describe("Pill", function () {
 });
 describe("PillJSS", function () {
   it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       group: pills
     }));
     expect(wrapper).toMatchSnapshot();

package/build/Pill/Stack/Stack.js

@@ -35,23 +35,25 @@ var Stack = function Stack(_ref) {
       disabled = _ref.disabled,
       _onClick = _ref.onClick,
       onClose = _ref.onClose,
-      idPrefix = _ref.idPrefix;
-  return _react["default"].createElement("button", {
+      idPrefix = _ref.idPrefix,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react["default"].createElement("button", {
     className: "".concat(classes.pill).concat(disabled ? " ".concat(classes.disabled) : ''),
     onClick: function onClick() {
       handleOnClick(id, _onClick);
     },
-    id: idPrefix ? "".concat(idPrefix).concat(id) : null
-  }, children && _react["default"].createElement(_Text["default"], {
+    id: idPrefix ? "".concat(idPrefix).concat(id) : null,
+    "data-testid": testId ? "".concat(testId).concat(id) : null
+  }, children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     className: classes.text,
     tag: "span",
     disabled: disabled
-  }, children), onClose && _react["default"].createElement("span", {
+  }, children), onClose && /*#__PURE__*/_react["default"].createElement("span", {
     className: classes.closeCont,
     onClick: function onClick(e) {
       return handleOnClose(e, id, onClose);
     }
-  }, _react["default"].createElement(_Icon["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     className: classes.close,
     iconName: "cross",
     colors: [_colors["default"].grey300],
@@ -67,7 +69,8 @@ Stack.propTypes = {
   disabled: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onClose: _propTypes["default"].func,
-  idPrefix: _propTypes["default"].string
+  idPrefix: _propTypes["default"].string,
+  testId: _propTypes["default"].string
 };
 var _default = Stack;
 exports["default"] = _default;

package/build/Pill/Stack/styles.js

@@ -24,6 +24,7 @@ var _default = {
     outline: 0,
     flex: 1,
     display: 'inline-flex',
+    alignItems: 'center',
     transition: '0.3s all',
     cursor: 'pointer',
     borderRadius: _spacing["default"].small,
@@ -47,7 +48,6 @@ var _default = {
     pointerEvents: 'none'
   },
   closeCont: {
-    marginBottom: -_spacing["default"].xTiny,
     width: _spacing["default"].base,
     height: _spacing["default"].base,
     display: 'inline-flex',
@@ -57,6 +57,9 @@ var _default = {
     marginLeft: -_spacing["default"].xTiny
   },
   text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
     marginLeft: _spacing["default"].xTiny,
     marginRight: _spacing["default"].xTiny
   }

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pill matches the choice snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Pill matches the group snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Pill matches the stack snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`Pill styles matches the snapshot 1`] = `
+Object {
+  "assistiveText": Object {
+    "color": "#aaaaaa",
+  },
+  "bottom": Object {
+    "height": 20,
+    "marginTop": 4,
+  },
+  "choiceGroup": Object {
+    "display": "flex",
+    "flexWrap": "wrap",
+  },
+  "container": Object {
+    "marginBottom": 8,
+    "position": "relative",
+  },
+  "disabled": Object {
+    "& $label": Object {
+      "color": "#dddddd",
+    },
+  },
+  "errorAssistiveText": Object {
+    "color": "#db3737",
+  },
+  "errorIcon": Object {
+    "marginBottom": -2,
+  },
+  "label": Object {
+    "& a": Object {
+      "color": "#1476fb",
+      "outline": "none",
+      "textDecoration": "none",
+    },
+    "color": "#222222",
+    "fontFamily": "'OccText', sans-serif",
+    "fontSize": 14,
+    "lineHeight": 1.5,
+    "transition": "0.3s all",
+  },
+  "left": Object {
+    "float": "left",
+  },
+  "top": Object {
+    "&:after": Object {
+      "clear": "both",
+      "content": "\\"\\"",
+    },
+    "height": 24,
+  },
+}
+`;
+
+exports[`PillJSS matches the snapshot 1`] = `ShallowWrapper {}`;