@occmundial/occ-atomic 3.0.0-beta.2 → 3.0.0-beta.20

package/build/Checkbox/Checkbox.js

@@ -13,6 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -53,6 +57,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       undetermined: props.undetermined
     };
     _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -81,6 +86,20 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(value, id);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        this.toggle();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -96,11 +115,16 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           id = _this$props2.id,
           className = _this$props2.className,
           style = _this$props2.style,
+          alignLeft = _this$props2.alignLeft,
           trk = _this$props2.trk,
           testId = _this$props2.testId;
       var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
+      var iconColor = disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.inverse["default"];
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: id,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
         className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         onClick: this.toggle,
         style: style,
@@ -108,16 +132,34 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       }, testId && {
         'data-value': value ? 1 : 0
       }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.checkWrap
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.check,
         id: trk
-      }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.box
+      }), undetermined && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "minus",
+        width: 16,
+        height: 16,
+        colors: [iconColor],
+        className: classes.icon
+      }), !undetermined && value && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "check",
+        width: 16,
+        height: 16,
+        colors: [iconColor],
+        className: classes.icon
+      }))), !!(label || right) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.labelWrap
+      }, label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
-        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
+        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
       }, label), right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
         mid: true,
         className: classes.right
-      }, right));
+      }, right)));
     }
   }]);
 
@@ -148,6 +190,9 @@ Checkbox.propTypes = {
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Id for catching selected element for tracking. */
   trk: _propTypes["default"].string,
   id: _propTypes["default"].string,

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

@@ -5,68 +5,103 @@ exports[`Checkbox matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Checkbox styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-        "!important",
-      ],
+    "& $check $box": Object {
+      "background": "#0059CD",
+      "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
+  "box": Object {
+    "background": "#fff",
+    "borderRadius": "4px",
+    "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "height": 20,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
   "check": Object {
-    "&:after": Object {
-      "background": "transparent",
-      "content": "\\"\\"",
-      "height": 18,
-      "left": "50%",
-      "marginTop": -1,
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 18,
-    },
-    "&:before": Object {
-      "background": "#ffffff",
-      "border": "1px solid #dddddd",
-      "borderRadius": 4,
-      "content": "\\"\\"",
-      "height": 16,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "width": 16,
-    },
-    "height": 24,
-    "position": "relative",
-    "width": 24,
+    "alignItems": "center",
+    "borderRadius": "4px",
+    "display": "grid",
+    "height": 20,
+    "justifyContent": "center",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
+  "checkWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flexShrink": 0,
+    "height": 48,
+    "justifyContent": "center",
+    "width": 52,
   },
   "cont": Object {
+    "&$active, &$undetermined": Object {
+      "&:active $check $box": Object {
+        "background": "#083CAE",
+        "boxShadow": "inset 0 0 0 2px rgba(255,255,255,0.2)",
+      },
+      "&:hover $check $box": Object {
+        "background": "#083CAE",
+        "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+      },
+    },
+    "&:active $check $box": Object {
+      "boxShadow": "inset 0 0 0 2px #6C6F89",
+    },
     "&:after": Object {
       "clear": "both",
       "content": "\\"\\"",
       "display": "table",
     },
-    "&:hover $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNkZGRkZGQiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    "&:focus-visible $check": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:hover $check $box": Object {
+      "boxShadow": "inset 0 0 0 1px #6C6F89",
     },
-    "alignItems": "start",
+    "alignItems": "flex-start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": 8,
-    "paddingTop": 8,
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& $check $box": Object {
+      "background": "#EDEDF1",
+      "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    },
+    "&$active, &$undetermined": Object {
+      "& $check $box": Object {
+        "background": "hsl(221 91.2% 35.7% / 0.1)",
+        "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+      },
+    },
     "pointerEvents": "none",
   },
+  "icon": Object {
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "margin": 2,
+  },
   "label": Object {
     "cursor": "pointer",
-    "flex": "1",
-    "float": "left",
-    "marginLeft": 8,
+    "flex": 1,
+    "marginLeft": "12px",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flex": 1,
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -74,16 +109,13 @@ Object {
     "whiteSpace": "nowrap",
   },
   "right": Object {
-    "float": "right",
-    "marginLeft": 8,
+    "marginLeft": "8px",
+    "pointerEvents": "none",
   },
   "undetermined": Object {
-    "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iIzA4M2NhZSIgLz4KICAgICAgICA8L3N2Zz4=)",
-        "!important",
-      ],
-      "marginTop": 0,
+    "& $check $box": Object {
+      "background": "#0059CD",
+      "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     },
   },
 }

package/build/Checkbox/styles.js

@@ -5,23 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var checkbox = _colors["default"].checkbox;
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var contentHeight = 48;
+var checkboxWidth = 52;
+var checkSize = 20;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: '0',
     '&:after': {
@@ -29,68 +32,108 @@ var _default = {
       display: 'table',
       clear: 'both'
     },
-    '&:hover $check:after': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].grey200]))
+    '&:focus-visible $check': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
+    },
+    '&:hover $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border.hover)
+    },
+    '&:active $check $box': {
+      boxShadow: "inset 0 0 0 2px ".concat(checkbox.unselected.border.hover)
+    },
+    '&$active, &$undetermined': {
+      '&:hover $check $box': {
+        boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.hover
+      },
+      '&:active $check $box': {
+        boxShadow: "inset 0 0 0 2px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.hover
+      }
     }
   },
+  checkWrap: {
+    width: checkboxWidth,
+    height: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
+  },
   check: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    position: 'relative',
-    '&:before': {
-      content: '""',
-      width: _spacing["default"].small,
-      height: _spacing["default"].small,
-      borderRadius: 4,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(_colors["default"].grey200),
-      background: _colors["default"].bgWhite
-    },
-    '&:after': {
-      content: '""',
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small,
-      marginTop: -1,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition: '0.3s all',
-      background: 'transparent'
-    }
+    width: checkSize,
+    height: checkSize,
+    borderRadius: _borderRadius["default"]['br-xs'],
+    transition: transition,
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  box: {
+    width: checkSize,
+    height: checkSize,
+    borderRadius: _borderRadius["default"]['br-xs'],
+    boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border["default"]),
+    background: checkbox['unselected']['bg']['default'],
+    transition: transition,
+    gridRowStart: 1,
+    gridColumnStart: 1
+  },
+  icon: {
+    gridRowStart: 1,
+    gridColumnStart: 1,
+    margin: 2
   },
   active: {
-    '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].check.icon([_colors["default"].prim])), '!important']
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   undetermined: {
-    '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].minus.icon([_colors["default"].prim])), '!important'],
-      marginTop: 0
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   disabled: {
-    opacity: 0.4,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border["default"]),
+      background: checkbox.unselected.bg.disabled
+    },
+    '&$active, &$undetermined': {
+      '& $check $box': {
+        boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.disabled
+      }
+    }
+  },
+  labelWrap: {
+    minHeight: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: _spacing["default"]['size-1'],
+    paddingBottom: _spacing["default"]['size-1'],
+    overflow: 'hidden',
+    flex: 1
   },
   label: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-3'],
     cursor: 'pointer',
-    "float": 'left',
-    flex: '1'
+    flex: 1
   },
   right: {
-    marginLeft: _spacing["default"].tiny,
-    "float": 'right'
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
   },
   overflow: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  alignLeft: {
+    flex: 'none'
   }
 };
 exports["default"] = _default;

package/build/Pill/Choice/Choice.js

@@ -7,103 +7,95 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
-
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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; }
 
-var Choice = /*#__PURE__*/function (_React$Component) {
-  _inherits(Choice, _React$Component);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-  var _super = _createSuper(Choice);
-
-  function Choice(props) {
-    var _this;
+var getStylesByStatus = function getStylesByStatus(selected, disabled) {
+  if (selected) {
+    if (disabled) {
+      return {
+        iconColor: _colors["default"].icon.inverse.disabled,
+        button: 'selectedDisabled',
+        text: 'textSelectedDisabled'
+      };
+    }
 
-    _classCallCheck(this, Choice);
+    return {
+      iconColor: _colors["default"].icon.inverse["default"],
+      button: 'selected',
+      text: 'textSelected'
+    };
+  }
 
-    _this = _super.call(this, props);
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
+  if (disabled) {
+    return {
+      iconColor: _colors["default"].icon.brand.disabled,
+      button: 'disabled',
+      text: 'textDisabled'
+    };
   }
 
-  _createClass(Choice, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          onClick = _this$props.onClick;
-      if (onClick) onClick(id);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          children = _this$props2.children,
-          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 /*#__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,
-        "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 && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        tag: "span",
-        className: classes.text,
-        primary: selected,
-        disabled: disabled
-      }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: rightIcon,
-        colors: [iconColor],
-        width: _iconSizes["default"].small,
-        height: _iconSizes["default"].small
-      }));
-    }
-  }]);
+  return {
+    iconColor: _colors["default"].icon.brand["default"],
+    button: 'enabled',
+    text: 'textEnabled'
+  };
+};
 
-  return Choice;
-}(_react["default"].Component);
+var Choice = function Choice(props) {
+  var classes = props.classes,
+      children = props.children,
+      selected = props.selected,
+      disabled = props.disabled,
+      idPrefix = props.idPrefix,
+      testId = props.testId,
+      leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      onClick = props.onClick,
+      id = props.id;
+  var handleOnClick = (0, _react.useCallback)(function () {
+    return onClick(id);
+  }, [onClick, id]);
+  var conditionedStyles = (0, _react.useMemo)(function () {
+    return getStylesByStatus(!!selected, !!disabled);
+  }, [selected, disabled]);
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({
+    className: "".concat(classes.pill, " ").concat(classes[conditionedStyles.button])
+  }, onClick && {
+    onClick: handleOnClick
+  }, {
+    disabled: disabled,
+    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: [conditionedStyles.iconColor],
+    className: classes.leftIcon,
+    width: 16,
+    height: 16
+  }), children && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.text, " ").concat(classes[conditionedStyles.text])
+  }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: rightIcon,
+    colors: [conditionedStyles.iconColor],
+    className: classes.rightIcon,
+    width: 16,
+    height: 16
+  }));
+};
 
 Choice.propTypes = {
   classes: _propTypes["default"].object.isRequired,