@dscout/particle 1.0.0-alpha.2 → 1.0.0-alpha.3

package/lib/components/advanced_options.js

@@ -13,6 +13,8 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _button_plain = _interopRequireDefault(require("./button_plain"));
 
 var _collapsible_content = _interopRequireDefault(require("./collapsible_content"));
@@ -25,8 +27,16 @@ var _modifier = _interopRequireDefault(require("./modifier"));
 
 var _collapsible = _interopRequireDefault(require("./collapsible"));
 
+var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "children", "disabled", "getRef", "id", "initialCollapsed", "name", "title"];
+
 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var propTypes = {
   _modifierClass: _propTypes.default.string,
   'aria-label': _propTypes.default.string,
@@ -53,7 +63,9 @@ function AdvancedOptions(_ref) {
       _ref$initialCollapsed = _ref.initialCollapsed,
       initialCollapsed = _ref$initialCollapsed === void 0 ? true : _ref$initialCollapsed,
       name = _ref.name,
-      title = _ref.title;
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var ariaControlsId = id ? "advanced-options-collapsible-content-".concat(id) : null;
   return _react.default.createElement(_collapsible.default, {
     initialCollapsed: initialCollapsed
@@ -67,7 +79,7 @@ function AdvancedOptions(_ref) {
       margin: {
         bottom: '0.75'
       }
-    }, _react.default.createElement(_button_plain.default, {
+    }, _react.default.createElement(_button_plain.default, _extends({}, (0, _data_attributes.default)(rest), {
       "aria-controls": ariaControlsId,
       "aria-expanded": !isCollapsed,
       "aria-label": ariaLabel,
@@ -77,7 +89,7 @@ function AdvancedOptions(_ref) {
       id: id,
       onClick: toggleCollapsed,
       name: name || title
-    }, _react.default.createElement(_flex.default, null, title, ' ', _react.default.createElement(_triangle_inverted.default, {
+    }), _react.default.createElement(_flex.default, null, title, ' ', _react.default.createElement(_triangle_inverted.default, {
       direction: isCollapsed ? 'right' : 'down'
     })))), _react.default.createElement(_collapsible_content.default, {
       collapsed: isCollapsed,

package/lib/components/attribute_input.js

@@ -15,8 +15,18 @@ var _refs = require("../utils/refs");
 
 var _forms = require("../utils/forms");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
+var _excluded = ["_modifierClass", "aria-describedby", "aria-invalid", "aria-label", "aria-labelledby", "checked", "disabled", "getRef", "id", "label", "name", "value", "onChange", "readOnly", "tabIndex"];
+
 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var propTypes = {
   _modifierClass: _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
@@ -55,7 +65,9 @@ function AttributeInput(_ref) {
       value = _ref.value,
       onChange = _ref.onChange,
       readOnly = _ref.readOnly,
-      tabIndex = _ref.tabIndex;
+      tabIndex = _ref.tabIndex,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var attributeId = determineIdValue(id, label);
   var selectorClassName = (0, _class_names.default)('Attribute', _modifierClass, {
     'Attribute--with-label': label
@@ -65,7 +77,7 @@ function AttributeInput(_ref) {
   });
   return _react.default.createElement("div", {
     className: selectorClassName
-  }, _react.default.createElement("input", {
+  }, _react.default.createElement("input", _extends({}, (0, _data_attributes.default)(rest), {
     id: attributeId,
     name: name,
     "aria-label": ariaLabel,
@@ -81,7 +93,7 @@ function AttributeInput(_ref) {
     tabIndex: tabIndex,
     readOnly: readOnly,
     disabled: disabled
-  }), _react.default.createElement("label", {
+  })), _react.default.createElement("label", {
     className: labelClassName,
     htmlFor: attributeId
   }, label));

package/lib/components/attribute_selector.js

@@ -13,10 +13,20 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _attribute_input = _interopRequireDefault(require("./attribute_input"));
 
+var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "attributes", "getRef", "id", "name", "onClick", "selected"];
+
 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var propTypes = {
   _modifierClass: _propTypes.default.string,
   'aria-label': _propTypes.default.string,
@@ -41,7 +51,8 @@ function AttributeSelector(_ref) {
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? 'attributes' : _ref$name,
       onClick = _ref.onClick,
-      selected = _ref.selected;
+      selected = _ref.selected,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   function handleAttributeSelected(_ref2) {
     var target = _ref2.target;
@@ -59,14 +70,14 @@ function AttributeSelector(_ref) {
     });
   }
 
-  return _react.default.createElement("div", {
+  return _react.default.createElement("div", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
     className: (0, _class_names.default)('Attribute__Selector spacing-h--0.25', _modifierClass),
     id: id,
     ref: getRef
-  }, Object.keys(attributes).map(renderAttribute));
+  }), Object.keys(attributes).map(renderAttribute));
 }
 
 AttributeSelector.propTypes = propTypes;

package/lib/components/button.js

@@ -13,10 +13,20 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _common_button = _interopRequireDefault(require("./common_button"));
 
+var _excluded = ["_modifierClass", "aria-controls", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "aria-pressed", "children", "color", "disabled", "getRef", "id", "linkComponent", "linkProps", "name", "onClick", "onMouseUp", "onMouseDown", "refProp", "size", "title", "type", "width", "variant"];
+
 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var ENUMS = {
   color: ['alert', 'close', 'coachmark', 'dscout', 'archive', 'none', 'success', 'note', 'screener', 'live', 'diary', 'test', 'invert'],
   size: ['big', 'small'],
@@ -53,8 +63,8 @@ var ALIAS_MAP = {
   live: 'alert'
 };
 
-function whitelistedClassFor(type, value) {
-  var classPrefix = type === 'color' ? "btn--color-" : "btn--";
+function supportedClassFor(type, value) {
+  var classPrefix = type === 'color' ? "Button--color-" : "Button--";
 
   if (ENUMS[type].includes(value)) {
     return "".concat(classPrefix).concat(ALIAS_MAP[value] || value);
@@ -85,9 +95,11 @@ function Button(_ref) {
       title = _ref.title,
       type = _ref.type,
       width = _ref.width,
-      variant = _ref.variant;
-  var className = (0, _class_names.default)('btn', whitelistedClassFor('size', size), whitelistedClassFor('width', width), whitelistedClassFor('variant', variant), whitelistedClassFor('color', color), _modifierClass);
-  return _react.default.createElement(_common_button.default, {
+      variant = _ref.variant,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var className = (0, _class_names.default)('Button', supportedClassFor('size', size), supportedClassFor('width', width), supportedClassFor('variant', variant), supportedClassFor('color', color), _modifierClass);
+  return _react.default.createElement(_common_button.default, _extends({}, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-label": ariaLabel,
@@ -107,7 +119,7 @@ function Button(_ref) {
     refProp: refProp,
     title: title,
     type: type
-  }, children);
+  }), children);
 }
 
 Button.propTypes = propTypes;

package/lib/components/button_control.js

@@ -13,8 +13,18 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
+var _excluded = ["_modifierClass", "active", "aria-controls", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "children", "disabled", "getRef", "id", "name", "onClick", "title"];
+
 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var propTypes = {
   _modifierClass: _propTypes.default.string,
   active: _propTypes.default.bool,
@@ -46,11 +56,13 @@ function ButtonControl(_ref) {
       id = _ref.id,
       name = _ref.name,
       onClick = _ref.onClick,
-      title = _ref.title;
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var className = (0, _class_names.default)('btn', 'Button__Control', _modifierClass, {
     'Button__Control--active': active
   });
-  return _react.default.createElement("button", {
+  return _react.default.createElement("button", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-label": ariaLabel,
@@ -64,7 +76,7 @@ function ButtonControl(_ref) {
     ref: getRef,
     title: title,
     type: "button"
-  }, children);
+  }), children);
 }
 
 ButtonControl.propTypes = propTypes;

package/lib/components/button_icon.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,24 +15,53 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _common_button = _interopRequireDefault(require("./common_button"));
 
+var _excluded = ["_modifierClass", "aria-controls", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "aria-pressed", "bgColor", "bgSize", "children", "color", "disabled", "getRef", "hoverBgColor", "hoverColor", "hoverBgSize", "id", "linkComponent", "linkProps", "name", "onClick", "onMouseUp", "onMouseDown", "refProp", "title", "type"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _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); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var propTypes = {
   _modifierClass: _propTypes.default.string,
-  active: _propTypes.default.bool,
-  affirmative: _propTypes.default.bool,
   'aria-controls': _propTypes.default.string,
   'aria-expanded': _propTypes.default.bool,
   'aria-label': _propTypes.default.string,
   'aria-labelledby': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
   'aria-pressed': _propTypes.default.bool,
+  bgColor: _propTypes.default.string,
+  bgSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   children: _propTypes.default.node.isRequired,
-  destructive: _propTypes.default.bool,
+  color: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   getRef: _refs.getRefPropType,
+  hoverBgColor: _propTypes.default.string,
+  hoverColor: _propTypes.default.string,
+  hoverBgSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   id: _propTypes.default.string,
   linkComponent: _propTypes.default.oneOfType([_propTypes.default.oneOf(['a']), _propTypes.default.func]),
   linkProps: _propTypes.default.object,
@@ -39,25 +70,30 @@ var propTypes = {
   onMouseUp: _propTypes.default.func,
   onMouseDown: _propTypes.default.func,
   refProp: _propTypes.default.func,
-  selected: _propTypes.default.bool,
   title: _propTypes.default.string,
   type: _propTypes.default.oneOf(['button', 'submit'])
 };
+var DEFAULT_COLOR = 'gray-1';
+var DEFAULT_HOVER_COLOR = 'main';
+var DEFAULT_DISABLED_COLOR = 'gray-3';
 
 function ButtonIcon(_ref) {
   var _modifierClass = _ref._modifierClass,
-      active = _ref.active,
       ariaControls = _ref['aria-controls'],
       ariaExpanded = _ref['aria-expanded'],
       ariaLabel = _ref['aria-label'],
       ariaLabelledby = _ref['aria-labelledby'],
       ariaDescribedby = _ref['aria-describedby'],
       ariaPressed = _ref['aria-pressed'],
-      affirmative = _ref.affirmative,
+      bgColor = _ref.bgColor,
+      bgSize = _ref.bgSize,
       children = _ref.children,
-      destructive = _ref.destructive,
+      color = _ref.color,
       disabled = _ref.disabled,
       getRef = _ref.getRef,
+      hoverBgColor = _ref.hoverBgColor,
+      hoverColor = _ref.hoverColor,
+      hoverBgSize = _ref.hoverBgSize,
       id = _ref.id,
       linkComponent = _ref.linkComponent,
       linkProps = _ref.linkProps,
@@ -66,16 +102,45 @@ function ButtonIcon(_ref) {
       onMouseUp = _ref.onMouseUp,
       onMouseDown = _ref.onMouseDown,
       refProp = _ref.refProp,
-      selected = _ref.selected,
       title = _ref.title,
-      type = _ref.type;
-  var btnClass = (0, _class_names.default)('btn--icon', _modifierClass, {
-    'btn--active': active,
-    'btn--affirmative': affirmative,
-    'btn--destructive': destructive,
-    'btn--selected': selected
-  });
-  return _react.default.createElement(_common_button.default, {
+      type = _ref.type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hovered = _useState2[0],
+      setHovered = _useState2[1];
+
+  function getBgColorClass() {
+    var colorEnum = bgColor;
+
+    if (disabled) {
+      colorEnum = bgColor;
+    } else if (hovered && hoverBgColor) {
+      colorEnum = hoverBgColor;
+    }
+
+    return colorEnum && "bg-color--".concat(colorEnum);
+  }
+
+  function getColorClass() {
+    var colorEnum = color || DEFAULT_COLOR;
+
+    if (disabled) {
+      colorEnum = color || DEFAULT_DISABLED_COLOR;
+    } else if (hovered) {
+      colorEnum = hoverColor || color || DEFAULT_HOVER_COLOR;
+    }
+
+    return "color--".concat(colorEnum);
+  }
+
+  var btnClass = (0, _class_names.default)('Button-Icon', getBgColorClass(), getColorClass(), _modifierClass);
+  var style = {
+    height: hovered ? hoverBgSize || bgSize : bgSize,
+    width: hovered ? hoverBgSize || bgSize : bgSize
+  };
+  return _react.default.createElement(_common_button.default, _extends({}, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-label": ariaLabel,
@@ -89,13 +154,26 @@ function ButtonIcon(_ref) {
     linkComponent: linkComponent,
     linkProps: linkProps,
     name: name,
+    onBlur: function onBlur() {
+      setHovered(false);
+    },
     onClick: onClick,
-    onMouseUp: onMouseUp,
+    onFocus: function onFocus() {
+      setHovered(true);
+    },
     onMouseDown: onMouseDown,
+    onMouseEnter: function onMouseEnter() {
+      setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovered(false);
+    },
+    onMouseUp: onMouseUp,
     refProp: refProp,
+    style: style,
     title: title,
     type: type
-  }, children);
+  }), children);
 }
 
 ButtonIcon.propTypes = propTypes;
@@ -111,58 +189,63 @@ ButtonIcon.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "active": {
+    "aria-controls": {
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false,
       "description": ""
     },
-    "affirmative": {
+    "aria-expanded": {
       "type": {
         "name": "bool"
       },
       "required": false,
       "description": ""
     },
-    "aria-controls": {
+    "aria-label": {
       "type": {
         "name": "string"
       },
       "required": false,
       "description": ""
     },
-    "aria-expanded": {
+    "aria-labelledby": {
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false,
       "description": ""
     },
-    "aria-label": {
+    "aria-describedby": {
       "type": {
         "name": "string"
       },
       "required": false,
       "description": ""
     },
-    "aria-labelledby": {
+    "aria-pressed": {
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false,
       "description": ""
     },
-    "aria-describedby": {
+    "bgColor": {
       "type": {
         "name": "string"
       },
       "required": false,
       "description": ""
     },
-    "aria-pressed": {
+    "bgSize": {
       "type": {
-        "name": "bool"
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
       },
       "required": false,
       "description": ""
@@ -174,9 +257,9 @@ ButtonIcon.__docgenInfo = {
       "required": true,
       "description": ""
     },
-    "destructive": {
+    "color": {
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false,
       "description": ""
@@ -196,6 +279,32 @@ ButtonIcon.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "hoverBgColor": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "hoverColor": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "hoverBgSize": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "id": {
       "type": {
         "name": "string"
@@ -261,13 +370,6 @@ ButtonIcon.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "selected": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": ""
-    },
     "title": {
       "type": {
         "name": "string"

package/lib/components/button_mode.js

@@ -13,10 +13,20 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _common_button = _interopRequireDefault(require("./common_button"));
 
+var _excluded = ["_modifierClass", "active", "aria-controls", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "aria-pressed", "children", "disabled", "getRef", "id", "linkComponent", "linkProps", "name", "onClick", "onMouseUp", "onMouseDown", "refProp", "title", "type"];
+
 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var propTypes = {
   _modifierClass: _propTypes.default.string,
   active: _propTypes.default.bool,
@@ -62,12 +72,14 @@ function ButtonMode(_ref) {
       onMouseDown = _ref.onMouseDown,
       refProp = _ref.refProp,
       title = _ref.title,
-      type = _ref.type;
-  var className = (0, _class_names.default)('btn font-size--base', _modifierClass, {
-    'btn--color-dscout btn--glass btn--small': active,
-    'btn--color-none btn--small': !active
+      type = _ref.type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var className = (0, _class_names.default)('Button font-size--base', _modifierClass, {
+    'Button--color-dscout Button--glass Button--small': active,
+    'Button--color-none Button--small': !active
   });
-  return _react.default.createElement(_common_button.default, {
+  return _react.default.createElement(_common_button.default, _extends({}, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-label": ariaLabel,
@@ -87,7 +99,7 @@ function ButtonMode(_ref) {
     refProp: refProp,
     title: title,
     type: type
-  }, children);
+  }), children);
 }
 
 ButtonMode.propTypes = propTypes;