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

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,17 +65,20 @@ 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
   });
   var labelClassName = (0, _class_names.default)('Attribute__Label', {
-    'Attribute__Label--selected': checked
+    'Attribute__Label--selected': checked,
+    'Attribute__Label--read-only': readOnly
   });
   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,
@@ -75,16 +88,18 @@ function AttributeInput(_ref) {
     ref: getRef,
     checked: checked,
     className: "Attribute__Input",
-    onChange: onChange,
+    onChange: readOnly ? undefined : onChange,
     type: "radio",
     value: value,
     tabIndex: tabIndex,
     readOnly: readOnly,
     disabled: disabled
-  }), _react.default.createElement("label", {
+  })), _react.default.createElement("label", {
     className: labelClassName,
     htmlFor: attributeId
-  }, label));
+  }, _react.default.createElement("span", {
+    className: "Attribute__Label__Content"
+  }, label)));
 }
 
 AttributeInput.propTypes = propTypes;

package/lib/components/attribute_selector.js

@@ -13,20 +13,32 @@ 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", "disabled", "getRef", "id", "name", "onClick", "readOnly", "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,
   'aria-labelledby': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
   attributes: _propTypes.default.object.isRequired,
+  disabled: _propTypes.default.bool,
   getRef: _refs.getRefPropType,
   id: _propTypes.default.string,
-  name: _propTypes.default.string,
+  name: _propTypes.default.string.isRequired,
   onClick: _propTypes.default.func.isRequired,
+  readOnly: _propTypes.default.bool,
   selected: _propTypes.default.string
 };
 
@@ -36,12 +48,14 @@ function AttributeSelector(_ref) {
       ariaLabelledby = _ref['aria-labelledby'],
       ariaDescribedby = _ref['aria-describedby'],
       attributes = _ref.attributes,
+      disabled = _ref.disabled,
       getRef = _ref.getRef,
       id = _ref.id,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? 'attributes' : _ref$name,
+      name = _ref.name,
       onClick = _ref.onClick,
-      selected = _ref.selected;
+      readOnly = _ref.readOnly,
+      selected = _ref.selected,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   function handleAttributeSelected(_ref2) {
     var target = _ref2.target;
@@ -50,23 +64,26 @@ function AttributeSelector(_ref) {
 
   function renderAttribute(attribute) {
     return _react.default.createElement(_attribute_input.default, {
-      key: attribute,
-      onChange: handleAttributeSelected,
       checked: attribute === selected,
+      disabled: disabled,
+      id: "".concat(name, "[").concat(attribute, "]"),
+      key: attribute,
       label: attributes[attribute],
       name: name,
+      onChange: handleAttributeSelected,
+      readOnly: readOnly,
       value: attribute
     });
   }
 
-  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;
@@ -75,17 +92,6 @@ AttributeSelector.__docgenInfo = {
   "methods": [],
   "displayName": "AttributeSelector",
   "props": {
-    "name": {
-      "defaultValue": {
-        "value": "'attributes'",
-        "computed": false
-      },
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": ""
-    },
     "_modifierClass": {
       "type": {
         "name": "string"
@@ -121,6 +127,13 @@ AttributeSelector.__docgenInfo = {
       "required": true,
       "description": ""
     },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "getRef": {
       "type": {
         "name": "custom",
@@ -136,6 +149,13 @@ AttributeSelector.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
+    },
     "onClick": {
       "type": {
         "name": "func"
@@ -143,6 +163,13 @@ AttributeSelector.__docgenInfo = {
       "required": true,
       "description": ""
     },
+    "readOnly": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "selected": {
       "type": {
         "name": "string"

package/lib/components/avatar.js

@@ -86,7 +86,7 @@ function Avatar(_ref) {
     img.src = avatarUrl;
   }, [avatarUrl]);
   var className = (0, _class_names.default)('Avatar', _modifierClass, {
-    'Avatar--background': !loaded
+    'Avatar--loaded': loaded
   });
   var style = {
     backgroundImage: loaded ? "url('".concat(avatarUrl, "')") : undefined,
@@ -103,7 +103,7 @@ function Avatar(_ref) {
     style: style,
     title: title || name
   }, !loaded && _react.default.createElement("span", {
-    className: "Avatar--initials",
+    className: "Avatar__Initials",
     style: size ? fontSizeStyle(size) : null
   }, (0, _strings.getInitials)(name)));
 }

package/lib/components/button.js

@@ -13,12 +13,22 @@ 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'],
+  color: ['alert', 'close', 'coachmark', 'dscout', 'archive', 'none', 'success', 'note', 'screener', 'live', 'diary', 'test', 'invert', 'black', 'white'],
   size: ['big', 'small'],
   width: ['fullwidth', 'tight', 'wide'],
   variant: ['glass', 'outline', 'shadow']
@@ -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;
@@ -214,6 +226,12 @@ Button.__docgenInfo = {
         }, {
           "value": "'invert'",
           "computed": false
+        }, {
+          "value": "'black'",
+          "computed": false
+        }, {
+          "value": "'white'",
+          "computed": false
         }]
       },
       "required": false,

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;
-  var className = (0, _class_names.default)('btn', 'Button__Control', _modifierClass, {
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var className = (0, _class_names.default)('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;