@dscout/particle 1.0.0-alpha.4 → 1.0.0-alpha.5

package/lib/components/avatar.js

@@ -17,12 +17,18 @@ var _strings = require("../utils/strings");
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
+var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "avatarUrl", "getRef", "id", "name", "size", "title"];
+
 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."); }
@@ -35,6 +41,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 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,
   'aria-label': _propTypes.default.string,
@@ -66,7 +76,8 @@ function Avatar(_ref) {
       id = _ref.id,
       name = _ref.name,
       size = _ref.size,
-      title = _ref.title;
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -93,7 +104,7 @@ function Avatar(_ref) {
     height: size,
     width: size
   };
-  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,
@@ -102,7 +113,7 @@ function Avatar(_ref) {
     ref: getRef,
     style: style,
     title: title || name
-  }, !loaded && _react.default.createElement("span", {
+  }), !loaded && _react.default.createElement("span", {
     className: "Avatar__Initials",
     style: size ? fontSizeStyle(size) : null
   }, (0, _strings.getInitials)(name)));

package/lib/components/blitz.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 _focus_trap = _interopRequireDefault(require("./focus_trap"));
@@ -21,8 +23,16 @@ var _x = _interopRequireDefault(require("../icons/x"));
 
 var _modifier = _interopRequireDefault(require("./modifier"));
 
+var _excluded = ["aria-label", "aria-labelledby", "aria-describedby", "children", "closeButtonTitle", "getRef", "id", "initialFocusOn", "isVisible", "requestClose", "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 = {
   'aria-label': _propTypes.default.string,
   'aria-labelledby': _propTypes.default.string,
@@ -52,7 +62,9 @@ function Blitz(_ref) {
       isVisible = _ref.isVisible,
       requestClose = _ref.requestClose,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'notification' : _ref$type;
+      type = _ref$type === void 0 ? 'notification' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var wrapperClassName = (0, _class_names.default)('Blitz__Wrapper', {
     'Blitz__Wrapper--show': isVisible
   });
@@ -61,9 +73,9 @@ function Blitz(_ref) {
     'bg-color--alert': type === 'alert',
     'bg-color--coachmark': type === 'coaching'
   });
-  return _react.default.createElement("div", {
+  return _react.default.createElement("div", _extends({}, (0, _data_attributes.default)(rest), {
     className: wrapperClassName
-  }, _react.default.createElement(_focus_trap.default, {
+  }), _react.default.createElement(_focus_trap.default, {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,

package/lib/components/button.js

@@ -29,7 +29,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var ENUMS = {
   color: ['alert', 'close', 'coachmark', 'dscout', 'archive', 'none', 'success', 'note', 'screener', 'live', 'diary', 'test', 'invert', 'black', 'white'],
-  size: ['big', 'small'],
+  size: ['tiny', 'big', 'small'],
   width: ['fullwidth', 'tight', 'wide'],
   variant: ['glass', 'outline', 'shadow']
 };
@@ -321,6 +321,9 @@ Button.__docgenInfo = {
       "type": {
         "name": "enum",
         "value": [{
+          "value": "'tiny'",
+          "computed": false
+        }, {
           "value": "'big'",
           "computed": false
         }, {

package/lib/components/button_mode.js

@@ -75,9 +75,9 @@ function ButtonMode(_ref) {
       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
+  var className = (0, _class_names.default)('Button Button--small Button--tight font-size--base', _modifierClass, {
+    'Button--color-dscout Button--glass': active,
+    'Button--color-none': !active
   });
   return _react.default.createElement(_common_button.default, _extends({}, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,

package/lib/components/card_body.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", "aria-label", "aria-labelledby", "aria-describedby", "children", "getRef", "id"];
+
 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,
@@ -32,15 +42,17 @@ function CardBody(_ref) {
       ariaDescribedby = _ref['aria-describedby'],
       children = _ref.children,
       getRef = _ref.getRef,
-      id = _ref.id;
-  return _react.default.createElement("div", {
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  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)('Card__Body', _modifierClass),
     id: id,
     ref: getRef
-  }, children);
+  }), children);
 }
 
 CardBody.propTypes = propTypes;

package/lib/components/card_footer.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", "aria-label", "aria-labelledby", "aria-describedby", "children", "hasDivider", "getRef", "id"];
+
 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,
@@ -35,8 +45,10 @@ function CardFooter(_ref) {
       _ref$hasDivider = _ref.hasDivider,
       hasDivider = _ref$hasDivider === void 0 ? true : _ref$hasDivider,
       getRef = _ref.getRef,
-      id = _ref.id;
-  return _react.default.createElement("div", {
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return _react.default.createElement("div", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
@@ -46,7 +58,7 @@ function CardFooter(_ref) {
     style: hasDivider ? undefined : {
       borderTop: 'none'
     }
-  }, children);
+  }), children);
 }
 
 CardFooter.propTypes = propTypes;

package/lib/components/cards.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", "aria-label", "aria-labelledby", "aria-describedby", "children", "getRef", "id"];
+
 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,
@@ -32,15 +42,17 @@ function Cards(_ref) {
       ariaDescribedby = _ref['aria-describedby'],
       children = _ref.children,
       getRef = _ref.getRef,
-      id = _ref.id;
-  return _react.default.createElement("div", {
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  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)('Cards', _modifierClass),
     id: id,
     ref: getRef
-  }, children);
+  }), children);
 }
 
 Cards.propTypes = propTypes;

package/lib/components/chip.js

@@ -15,10 +15,20 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
+var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "children", "color", "getRef", "id", "outline", "textColor", "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 _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; }
 
+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,
@@ -65,7 +75,8 @@ function Chip(_ref) {
       id = _ref.id,
       outline = _ref.outline,
       textColor = _ref.textColor,
-      title = _ref.title;
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   function getContentColor() {
     if (outline) return textColor || null;
@@ -77,7 +88,7 @@ function Chip(_ref) {
     'Chip--outlined': outline
   }, _defineProperty(_classNames, "color--".concat(color), color && outline), _defineProperty(_classNames, "bg-color--".concat(color), color && !outline), _classNames));
   var contentClassname = (0, _class_names.default)('Chip__Content', _defineProperty({}, "color--".concat(contentColor), contentColor));
-  return _react.default.createElement("span", {
+  return _react.default.createElement("span", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
@@ -85,7 +96,7 @@ function Chip(_ref) {
     id: id,
     ref: getRef,
     title: title
-  }, _react.default.createElement("span", {
+  }), _react.default.createElement("span", {
     className: contentClassname
   }, children));
 }

package/lib/components/collapsible_content.js

@@ -17,14 +17,20 @@ var _dom = require("../utils/dom");
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _shared_hooks = require("./shared_hooks");
 
+var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "children", "collapsed", "getRef", "id"];
+
 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."); }
@@ -37,6 +43,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 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,
   'aria-label': _propTypes.default.string,
@@ -66,7 +76,8 @@ function CollapsibleContent(_ref) {
       children = _ref.children,
       collapsedProp = _ref.collapsed,
       getRef = _ref.getRef,
-      id = _ref.id;
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(collapsedProp),
       _useState2 = _slicedToArray(_useState, 2),
@@ -121,7 +132,7 @@ function CollapsibleContent(_ref) {
   var contentClassNames = (0, _class_names.default)('Collapsible__Content', {
     'Collapsible__Content--collapsed': collapsedState
   });
-  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,
@@ -130,7 +141,7 @@ function CollapsibleContent(_ref) {
       (0, _refs.handleGetRef)(wrapper, _ref2);
       (0, _refs.handleGetRef)(getRef, _ref2);
     }
-  }, _react.default.createElement("div", {
+  }), _react.default.createElement("div", {
     className: contentClassNames,
     id: id,
     ref: content

package/lib/components/column.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 _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "children", "getRef", "id", "span", "total"];
+
 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 _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; }
 
+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,
@@ -42,16 +52,18 @@ function Column(_ref) {
       getRef = _ref.getRef,
       id = _ref.id,
       span = _ref.span,
-      total = _ref.total;
+      total = _ref.total,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var className = (0, _class_names.default)('Column', _modifierClass, _defineProperty({}, "Column--".concat(span, "of").concat(total), span && total && isLogical(span, total)));
-  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: className,
     id: id,
     ref: getRef
-  }, children);
+  }), children);
 }
 
 Column.propTypes = propTypes;

package/lib/components/container.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 _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "children", "getRef", "id", "padding", "shadow"];
+
 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 _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; }
 
+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,
@@ -42,17 +52,19 @@ function Container(_ref) {
       id = _ref.id,
       _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? '2' : _ref$padding,
-      shadow = _ref.shadow;
+      shadow = _ref.shadow,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var modifierAppliesPadding = PADDING_CLASS_PATTERN.test(_modifierClass);
   var className = (0, _class_names.default)('Container', _modifierClass, (_classNames = {}, _defineProperty(_classNames, "padding--".concat(padding), padding && !modifierAppliesPadding), _defineProperty(_classNames, "shadow--".concat(shadow), shadow), _classNames));
-  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: className,
     id: id,
     ref: getRef
-  }, children);
+  }), children);
 }
 
 Container.propTypes = propTypes;

package/lib/components/container_header.js

@@ -13,9 +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", "aria-label", "aria-labelledby", "aria-describedby", "children", "getRef", "id", "isEditing", "onClick"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* eslint jsx-a11y/no-static-element-interactions: off  */
+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,
@@ -38,11 +47,13 @@ function ContainerHeader(_ref) {
       id = _ref.id,
       _ref$isEditing = _ref.isEditing,
       isEditing = _ref$isEditing === void 0 ? false : _ref$isEditing,
-      onClick = _ref.onClick;
+      onClick = _ref.onClick,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var className = (0, _class_names.default)('Container__Header', _modifierClass, {
     'Container__Header--editing': isEditing
   });
-  return _react.default.createElement("header", {
+  return _react.default.createElement("header", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
@@ -50,7 +61,7 @@ function ContainerHeader(_ref) {
     id: id,
     onClick: onClick,
     ref: getRef
-  }, children);
+  }), children);
 }
 
 ContainerHeader.propTypes = propTypes;

package/lib/components/dropdown.js

@@ -19,14 +19,24 @@ var _types = require("../utils/types");
 
 var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
+var _excluded = ["_modifierClass", "align", "aria-label", "aria-labelledby", "aria-describedby", "contentWidth", "getRef", "id", "maxHeight", "opens"];
+
 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 _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; }
 
+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; }
+
 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); } }
@@ -201,6 +211,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           _this5 = this;
 
       var isOpen = this.state.isOpen;
+
       var _this$props2 = this.props,
           _modifierClass = _this$props2._modifierClass,
           align = _this$props2.align,
@@ -211,14 +222,16 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           getRef = _this$props2.getRef,
           id = _this$props2.id,
           maxHeight = _this$props2.maxHeight,
-          opens = _this$props2.opens;
+          opens = _this$props2.opens,
+          rest = _objectWithoutProperties(_this$props2, _excluded);
+
       var className = (0, _class_names.default)('Dropdown', _modifierClass);
       var contentClassName = (0, _class_names.default)('Dropdown__Content', {
         'Dropdown__Content--open': isOpen
       });
       var style = (_style = {}, _defineProperty(_style, align, 0), _defineProperty(_style, OPENS_PROP_MAPPING[opens], '100%'), _defineProperty(_style, "width", contentWidth), _defineProperty(_style, "maxHeight", maxHeight), _style);
       var ariaControlsId = id ? "dropdown-togglable-content-".concat(id) : null;
-      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,
@@ -227,7 +240,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           if (_ref3) _this5.dropdownElem = _ref3;
           (0, _refs.handleGetRef)(getRef, _ref3);
         }
-      }, this.renderToggle(ariaControlsId), _react.default.createElement("div", {
+      }), this.renderToggle(ariaControlsId), _react.default.createElement("div", {
         id: ariaControlsId,
         className: contentClassName,
         ref: function ref(el) {

package/lib/components/editing_container.js

@@ -19,8 +19,12 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _noop = _interopRequireDefault(require("../utils/noop"));
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _swappable_content = _interopRequireDefault(require("./swappable_content"));
 
+var _excluded = ["aria-label", "aria-labelledby", "aria-describedby", "edit", "getRef", "id", "isEditing", "label", "onClick", "view", "_modifierClass"];
+
 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); }
@@ -29,6 +33,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && 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; }
+
 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); } }
@@ -133,7 +141,9 @@ var EditingContainer = /*#__PURE__*/function (_Component) {
           label = _this$props.label,
           onClick = _this$props.onClick,
           view = _this$props.view,
-          _modifierClass = _this$props._modifierClass;
+          _modifierClass = _this$props._modifierClass,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
       var editable = !isEditing && !!onClick;
       var className = (0, _class_names.default)('Container', _modifierClass, {
         'Container--editing': isEditing,
@@ -146,7 +156,7 @@ var EditingContainer = /*#__PURE__*/function (_Component) {
         tabIndex: '0',
         'aria-label': label
       } : {};
-      return _react.default.createElement("div", _extends({
+      return _react.default.createElement("div", _extends({}, (0, _data_attributes.default)(rest), {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-describedby": ariaDescribedby,

package/lib/components/file_input.js

@@ -83,7 +83,7 @@ function FileInput(_ref) {
   })), _react.default.createElement("label", {
     htmlFor: uniqueId,
     className: "File-Input__Label Button Button--small Button--color-dscout"
-  }, label), _react.default.createElement("span", {
+  }, label), !!filename && _react.default.createElement("span", {
     className: "color--gray-2 margin-l--0.75"
   }, filename));
 }