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

package/lib/components/button_plain.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-controls", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "children", "disabled", "getRef", "id", "name", "onClick", "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,
   'aria-controls': _propTypes.default.string,
@@ -47,14 +57,16 @@ function ButtonPlain(_ref) {
       onClick = _ref.onClick,
       title = _ref.title,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type;
-  return _react.default.createElement("button", {
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return _react.default.createElement("button", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
-    className: (0, _class_names.default)('btn--plain', _modifierClass),
+    className: (0, _class_names.default)('Button--plain', _modifierClass),
     disabled: disabled,
     id: id,
     ref: getRef,
@@ -62,7 +74,7 @@ function ButtonPlain(_ref) {
     onClick: onClick,
     title: title,
     type: type
-  }, children);
+  }), children);
 }
 
 ButtonPlain.propTypes = propTypes;

package/lib/components/card.js

@@ -15,12 +15,20 @@ var _reject = _interopRequireDefault(require("../utils/reject"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
+var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "borderColor", "borderPosition", "children", "getRef", "height", "id", "linkComponent", "linkProps", "refProp", "width"];
+
 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,
@@ -71,7 +79,9 @@ function Card(_ref) {
       _ref$refProp = _ref.refProp,
       refProp = _ref$refProp === void 0 ? 'ref' : _ref$refProp,
       _ref$width = _ref.width,
-      width = _ref$width === void 0 ? {} : _ref$width;
+      width = _ref$width === void 0 ? {} : _ref$width,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var className = (0, _class_names.default)('Card', _modifierClass, (_classNames = {}, _defineProperty(_classNames, "b-color--".concat(borderColor), borderColor), _defineProperty(_classNames, 'Card--bordered', borderColor), _defineProperty(_classNames, "Card--bordered-".concat(borderPosition), borderColor && borderPosition), _classNames));
   var refProps = getRef ? _defineProperty({}, refProp, getRef) : {};
   var Component = linkComponent || 'div';
@@ -81,7 +91,7 @@ function Card(_ref) {
   var baseWidth = width.base,
       minWidth = width.min,
       maxWidth = width.max;
-  return _react.default.createElement(Component, _extends({}, sanitizeProps(linkProps), refProps, {
+  return _react.default.createElement(Component, _extends({}, sanitizeProps(linkProps), refProps, (0, _data_attributes.default)(rest), {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,

package/lib/components/checkbox_input.js

@@ -15,12 +15,22 @@ var _refs = require("../utils/refs");
 
 var _forms = require("../utils/forms");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _checkbox_check = _interopRequireDefault(require("../icons/checkbox_check"));
 
 var _checkbox_indeterminate = _interopRequireDefault(require("../icons/checkbox_indeterminate"));
 
+var _excluded = ["_modifierClass", "aria-describedby", "aria-invalid", "aria-label", "aria-labelledby", "checked", "disabled", "getRef", "id", "indeterminate", "label", "name", "onChange", "readOnly", "tabIndex", "value"];
+
 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,
@@ -65,14 +75,16 @@ function CheckboxInput(_ref) {
       onChange = _ref.onChange,
       readOnly = _ref.readOnly,
       tabIndex = _ref.tabIndex,
-      value = _ref.value;
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var checkboxId = (0, _forms.looksUnique)(id) ? id : (0, _forms.unique)(id);
   var className = (0, _class_names.default)('Selector', _modifierClass, {
     'Selector--with-label': label
   });
   return _react.default.createElement("div", {
     className: className
-  }, _react.default.createElement("input", {
+  }, _react.default.createElement("input", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-describedby": ariaDescribedby,
     "aria-invalid": ariaInvalid,
     "aria-label": ariaLabel,
@@ -91,7 +103,7 @@ function CheckboxInput(_ref) {
     tabIndex: tabIndex,
     type: "checkbox",
     value: (0, _forms.inputValue)(value, onChange)
-  }), _react.default.createElement("label", {
+  })), _react.default.createElement("label", {
     className: "Selector__Field",
     htmlFor: checkboxId
   }), label && _react.default.createElement("label", {

package/lib/components/collapsing_menu.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 _flex = _interopRequireDefault(require("./flex"));
 
 var _collapsible_content = _interopRequireDefault(require("./collapsible_content"));
@@ -25,8 +27,16 @@ var _collapsible = _interopRequireDefault(require("./collapsible"));
 
 var _separator = _interopRequireDefault(require("./separator"));
 
+var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "children", "collapsedTitle", "expandedTitle", "getRef", "heading", "id", "initialCollapsed", "name"];
+
 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,
@@ -60,7 +70,9 @@ function CollapsingMenu(_ref) {
       id = _ref.id,
       _ref$initialCollapsed = _ref.initialCollapsed,
       initialCollapsed = _ref$initialCollapsed === void 0 ? false : _ref$initialCollapsed,
-      name = _ref.name;
+      name = _ref.name,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var className = (0, _class_names.default)('Menu', 'Menu--tight', 'Menu--contained', _modifierClass);
   var ariaControlsId = id ? "collapsing-menu-collapsible-content-".concat(id) : null;
   return _react.default.createElement(_collapsible.default, {
@@ -73,7 +85,7 @@ function CollapsingMenu(_ref) {
       ref: getRef
     }, _react.default.createElement("header", {
       className: "margin-b--none"
-    }, _react.default.createElement("button", {
+    }, _react.default.createElement("button", _extends({}, (0, _data_attributes.default)(rest), {
       "aria-controls": ariaControlsId,
       "aria-expanded": !isCollapsed,
       "aria-label": ariaLabel,
@@ -84,7 +96,7 @@ function CollapsingMenu(_ref) {
       onClick: toggleCollapsed,
       title: isCollapsed ? collapsedTitle : expandedTitle,
       type: "button"
-    }, _react.default.createElement(_flex.default, {
+    }), _react.default.createElement(_flex.default, {
       justify: "between",
       width: "100%"
     }, heading, _react.default.createElement("div", {

package/lib/components/common_button.js

@@ -13,12 +13,20 @@ var _reject = _interopRequireDefault(require("../utils/reject"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
+var _excluded = ["aria-controls", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "aria-pressed", "children", "className", "disabled", "getRef", "id", "linkComponent", "linkProps", "name", "onBlur", "onClick", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "refProp", "style", "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 _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 = {
   'aria-controls': _propTypes.default.string,
   'aria-expanded': _propTypes.default.bool,
@@ -34,10 +42,15 @@ var propTypes = {
   linkComponent: _propTypes.default.oneOfType([_propTypes.default.oneOf(['a']), _propTypes.default.func]),
   linkProps: _propTypes.default.object,
   name: _propTypes.default.string,
+  onBlur: _propTypes.default.func,
   onClick: _propTypes.default.func,
-  onMouseUp: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
   onMouseDown: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func,
+  onMouseUp: _propTypes.default.func,
   refProp: _propTypes.default.string,
+  style: _propTypes.default.object,
   title: _propTypes.default.string,
   type: _propTypes.default.oneOf(['button', 'submit'])
 };
@@ -65,18 +78,25 @@ function CommonButton(_ref) {
       linkComponent = _ref.linkComponent,
       linkProps = _ref.linkProps,
       name = _ref.name,
+      onBlur = _ref.onBlur,
       onClick = _ref.onClick,
-      onMouseUp = _ref.onMouseUp,
+      onFocus = _ref.onFocus,
       onMouseDown = _ref.onMouseDown,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      onMouseUp = _ref.onMouseUp,
       _ref$refProp = _ref.refProp,
       refProp = _ref$refProp === void 0 ? 'ref' : _ref$refProp,
+      style = _ref.style,
       title = _ref.title,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type;
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var isLink = !!linkComponent;
   var Component = linkComponent || 'button';
   var refProps = getRef ? _defineProperty({}, refProp, getRef) : {};
-  return _react.default.createElement(Component, _extends({}, sanitizeProps(linkProps, disabled), refProps, {
+  return _react.default.createElement(Component, _extends({}, sanitizeProps(linkProps, disabled), refProps, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-label": ariaLabel,
@@ -87,9 +107,14 @@ function CommonButton(_ref) {
     disabled: disabled,
     id: id,
     name: name,
+    onBlur: onBlur,
     onClick: onClick,
+    onFocus: onFocus,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     onMouseUp: onMouseUp,
     onMouseDown: onMouseDown,
+    style: style,
     tabIndex: isLink && disabled ? -1 : undefined,
     title: title,
     type: isLink ? undefined : type
@@ -239,6 +264,13 @@ CommonButton.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "onBlur": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
     "onClick": {
       "type": {
         "name": "func"
@@ -246,7 +278,7 @@ CommonButton.__docgenInfo = {
       "required": false,
       "description": ""
     },
-    "onMouseUp": {
+    "onFocus": {
       "type": {
         "name": "func"
       },
@@ -260,6 +292,34 @@ CommonButton.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onMouseUp": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "style": {
+      "type": {
+        "name": "object"
+      },
+      "required": false,
+      "description": ""
+    },
     "title": {
       "type": {
         "name": "string"

package/lib/components/common_input.js

@@ -17,12 +17,22 @@ var _forms = require("../utils/forms");
 
 var _props = require("../utils/props");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _with_addons = _interopRequireDefault(require("./with_addons"));
 
+var _excluded = ["_modifierClass", "aria-describedby", "aria-invalid", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "disabled", "getRef", "id", "invalid", "max", "maxLength", "min", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "suffix", "tabIndex", "type", "value"];
+
 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-describedby': _propTypes.default.string,
@@ -84,11 +94,13 @@ function CommonInput(_ref) {
       suffix = _ref.suffix,
       tabIndex = _ref.tabIndex,
       type = _ref.type,
-      value = _ref.value;
+      value = _ref.value,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var affixed = !!prefix || !!suffix;
   var inputClass = (0, _class_names.default)('Input', (_classNames = {}, _defineProperty(_classNames, _modifierClass, _modifierClass && !affixed), _defineProperty(_classNames, 'Input--filled', value), _defineProperty(_classNames, 'Input--invalid', invalid), _defineProperty(_classNames, 'Input--mini', mini), _classNames));
 
-  var input = _react.default.createElement("input", {
+  var input = _react.default.createElement("input", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-describedby": ariaDescribedby,
     "aria-invalid": ariaInvalid,
     "aria-label": ariaLabel,
@@ -113,7 +125,7 @@ function CommonInput(_ref) {
     tabIndex: tabIndex,
     type: type,
     value: (0, _forms.inputValue)(value, onChange)
-  });
+  }));
 
   if (affixed) {
     return _react.default.createElement(_with_addons.default, {

package/lib/components/container.js

@@ -15,29 +15,34 @@ var _refs = require("../utils/refs");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 var propTypes = {
   _modifierClass: _propTypes.default.string,
   'aria-label': _propTypes.default.string,
   'aria-labelledby': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
   children: _propTypes.default.node.isRequired,
-  fullheight: _propTypes.default.bool,
   getRef: _refs.getRefPropType,
-  id: _propTypes.default.string
+  id: _propTypes.default.string,
+  padding: _propTypes.default.oneOf(['none', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '2', '3', '4']),
+  shadow: _propTypes.default.oneOf(['s', 'm', 'l', 'xl'])
 };
 
 function Container(_ref) {
+  var _classNames;
+
   var _modifierClass = _ref._modifierClass,
       ariaLabel = _ref['aria-label'],
       ariaLabelledby = _ref['aria-labelledby'],
       ariaDescribedby = _ref['aria-describedby'],
       children = _ref.children,
-      fullheight = _ref.fullheight,
       getRef = _ref.getRef,
-      id = _ref.id;
-  var className = (0, _class_names.default)('Container', _modifierClass, {
-    'height--100-pct': fullheight
-  });
+      id = _ref.id,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? '2' : _ref$padding,
+      shadow = _ref.shadow;
+  var className = (0, _class_names.default)('Container', _modifierClass, (_classNames = {}, _defineProperty(_classNames, "padding--".concat(padding), padding), _defineProperty(_classNames, "shadow--".concat(shadow), shadow), _classNames));
   return _react.default.createElement("div", {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
@@ -54,6 +59,48 @@ Container.__docgenInfo = {
   "methods": [],
   "displayName": "Container",
   "props": {
+    "padding": {
+      "defaultValue": {
+        "value": "'2'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'none'",
+          "computed": false
+        }, {
+          "value": "'0.25'",
+          "computed": false
+        }, {
+          "value": "'0.5'",
+          "computed": false
+        }, {
+          "value": "'0.75'",
+          "computed": false
+        }, {
+          "value": "'1'",
+          "computed": false
+        }, {
+          "value": "'1.25'",
+          "computed": false
+        }, {
+          "value": "'1.5'",
+          "computed": false
+        }, {
+          "value": "'2'",
+          "computed": false
+        }, {
+          "value": "'3'",
+          "computed": false
+        }, {
+          "value": "'4'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
     "_modifierClass": {
       "type": {
         "name": "string"
@@ -89,13 +136,6 @@ Container.__docgenInfo = {
       "required": true,
       "description": ""
     },
-    "fullheight": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": ""
-    },
     "getRef": {
       "type": {
         "name": "custom",
@@ -110,6 +150,26 @@ Container.__docgenInfo = {
       },
       "required": false,
       "description": ""
+    },
+    "shadow": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'s'",
+          "computed": false
+        }, {
+          "value": "'m'",
+          "computed": false
+        }, {
+          "value": "'l'",
+          "computed": false
+        }, {
+          "value": "'xl'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

package/lib/components/container_header.js

@@ -39,8 +39,8 @@ function ContainerHeader(_ref) {
       _ref$isEditing = _ref.isEditing,
       isEditing = _ref$isEditing === void 0 ? false : _ref$isEditing,
       onClick = _ref.onClick;
-  var className = (0, _class_names.default)('Container--Header', _modifierClass, {
-    'Container--Header__editing': isEditing
+  var className = (0, _class_names.default)('Container__Header', _modifierClass, {
+    'Container__Header--editing': isEditing
   });
   return _react.default.createElement("header", {
     "aria-label": ariaLabel,

package/lib/components/drag_and_drop.js

@@ -15,12 +15,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", "accept", "aria-label", "aria-labelledby", "aria-describedby", "error", "children", "disabled", "getRef", "id", "multiple", "name", "onChange", "onDrop", "onDragEnter", "onDragOver", "onDragLeave", "success", "tabIndex", "value"];
+
 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."); }
@@ -33,6 +39,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,
   accept: _propTypes.default.string,
@@ -77,7 +87,8 @@ function DragAndDrop(_ref) {
       success = _ref.success,
       tabIndex = _ref.tabIndex,
       _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value;
+      value = _ref$value === void 0 ? '' : _ref$value,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -111,7 +122,7 @@ function DragAndDrop(_ref) {
     onDragLeave: disabled ? undefined : handleLeave,
     onDrop: disabled ? undefined : onDrop,
     tabIndex: tabIndex || 0
-  }, _react.default.createElement("input", {
+  }, _react.default.createElement("input", _extends({}, (0, _data_attributes.default)(rest), {
     accept: accept,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
@@ -125,7 +136,7 @@ function DragAndDrop(_ref) {
     ref: getRef,
     type: "file",
     value: value
-  }), children);
+  })), children);
 }
 
 DragAndDrop.propTypes = propTypes;

package/lib/components/dropdown_input_toggle.js

@@ -13,11 +13,20 @@ var _class_names = _interopRequireDefault(require("../utils/class_names"));
 
 var _refs = require("../utils/refs");
 
+var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"));
+
 var _triangle_inverted = _interopRequireDefault(require("../icons/triangle_inverted"));
 
+var _excluded = ["_modifierClass", "aria-controls", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "children", "getRef", "id", "invalid", "isToggled", "mini", "name", "onClick", "disabled"];
+
 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-controls': _propTypes.default.string,
@@ -51,13 +60,15 @@ function DropdownInputToggle(_ref) {
       mini = _ref.mini,
       name = _ref.name,
       onClick = _ref.onClick,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   return _react.default.createElement("div", {
     className: (0, _class_names.default)('Dropdown__Toggle', _modifierClass, {
       'Dropdown__Toggle--disabled': disabled,
       'Dropdown__Toggle--mini': mini
     })
-  }, _react.default.createElement("button", {
+  }, _react.default.createElement("button", _extends({}, (0, _data_attributes.default)(rest), {
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-label": ariaLabel,
@@ -74,7 +85,7 @@ function DropdownInputToggle(_ref) {
     onClick: onClick,
     ref: getRef,
     type: "button"
-  }, children), _react.default.createElement("div", {
+  }), children), _react.default.createElement("div", {
     className: "Dropdown__Toggle__Icon"
   }, _react.default.createElement(_triangle_inverted.default, {
     direction: isToggled ? 'up' : 'down'

package/lib/components/editing_container.js

@@ -136,9 +136,8 @@ var EditingContainer = /*#__PURE__*/function (_Component) {
           _modifierClass = _this$props._modifierClass;
       var editable = !isEditing && !!onClick;
       var className = (0, _class_names.default)('Container', _modifierClass, {
-        Container__editing: isEditing,
-        Container__editable: editable,
-        'margin-v--3': isEditing
+        'Container--editing': isEditing,
+        'Container--editable': editable
       });
       var clickProps = editable ? {
         onClick: this.handleClick,