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

package/lib/components/attribute_input.js

@@ -73,7 +73,8 @@ function AttributeInput(_ref) {
     '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
@@ -87,7 +88,7 @@ function AttributeInput(_ref) {
     ref: getRef,
     checked: checked,
     className: "Attribute__Input",
-    onChange: onChange,
+    onChange: readOnly ? undefined : onChange,
     type: "radio",
     value: value,
     tabIndex: tabIndex,
@@ -96,7 +97,9 @@ function AttributeInput(_ref) {
   })), _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

@@ -17,7 +17,7 @@ var _data_attributes = _interopRequireDefault(require("../utils/data_attributes"
 
 var _attribute_input = _interopRequireDefault(require("./attribute_input"));
 
-var _excluded = ["_modifierClass", "aria-label", "aria-labelledby", "aria-describedby", "attributes", "getRef", "id", "name", "onClick", "selected"];
+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 }; }
 
@@ -33,10 +33,12 @@ var propTypes = {
   '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
 };
 
@@ -46,11 +48,12 @@ 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,
+      readOnly = _ref.readOnly,
       selected = _ref.selected,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -61,11 +64,14 @@ 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
     });
   }
@@ -86,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"
@@ -132,6 +127,13 @@ AttributeSelector.__docgenInfo = {
       "required": true,
       "description": ""
     },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "getRef": {
       "type": {
         "name": "custom",
@@ -147,6 +149,13 @@ AttributeSelector.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
+    },
     "onClick": {
       "type": {
         "name": "func"
@@ -154,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

@@ -28,7 +28,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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']
@@ -226,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

@@ -59,7 +59,7 @@ function ButtonControl(_ref) {
       title = _ref.title,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var className = (0, _class_names.default)('btn', 'Button__Control', _modifierClass, {
+  var className = (0, _class_names.default)('Button__Control', _modifierClass, {
     'Button__Control--active': active
   });
   return _react.default.createElement("button", _extends({}, (0, _data_attributes.default)(rest), {

package/lib/components/button_icon.js

@@ -173,7 +173,9 @@ function ButtonIcon(_ref) {
     style: style,
     title: title,
     type: type
-  }), children);
+  }), _react.default.createElement("span", {
+    className: "display--b"
+  }, children));
 }
 
 ButtonIcon.propTypes = propTypes;

package/lib/components/container.js

@@ -28,6 +28,7 @@ var propTypes = {
   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'])
 };
+var PADDING_CLASS_PATTERN = /padding-/;
 
 function Container(_ref) {
   var _classNames;
@@ -42,7 +43,8 @@ function Container(_ref) {
       _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));
+  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", {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,

package/lib/components/file_input.js

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

package/lib/components/input_group.js

@@ -9,9 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _class_names = _interopRequireDefault(require("../utils/class_names"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
+  _modifierClass: _propTypes.default.string,
   'aria-label': _propTypes.default.string,
   'aria-labelledby': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
@@ -20,7 +23,8 @@ var propTypes = {
 };
 
 function InputGroup(_ref) {
-  var ariaLabel = _ref['aria-label'],
+  var _modifierClass = _ref._modifierClass,
+      ariaLabel = _ref['aria-label'],
       ariaLabelledby = _ref['aria-labelledby'],
       ariaDescribedby = _ref['aria-describedby'],
       children = _ref.children,
@@ -29,7 +33,7 @@ function InputGroup(_ref) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
-    className: "Input-Group",
+    className: (0, _class_names.default)('Input-Group', _modifierClass),
     id: id
   }, children);
 }
@@ -40,6 +44,13 @@ InputGroup.__docgenInfo = {
   "methods": [],
   "displayName": "InputGroup",
   "props": {
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "aria-label": {
       "type": {
         "name": "string"

package/lib/components/modal.js

@@ -49,7 +49,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var PADDING_ENUMS = ['none', '0.25', '0.5', '0.75', '1', '1.5', '2', '3', '4'];
+var PADDING_ENUMS = ['none', '0.25', '0.5', '0.75', '1', '1.25', '1.5', '2', '3', '4'];
 var propTypes = {
   'aria-label': _propTypes.default.string,
   'aria-labelledby': _propTypes.default.string,
@@ -82,8 +82,9 @@ var Modal = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, Modal);
 
     _this = _super.call(this);
-    _this.handleClickWrapper = _this.handleClickWrapper.bind(_assertThisInitialized(_this));
     _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
+    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
+    _this.handleMouseUp = _this.handleMouseUp.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -113,18 +114,35 @@ var Modal = /*#__PURE__*/function (_Component) {
     key: "handleOpen",
     value: function handleOpen() {
       (0, _dom.toggleBodyScrolling)(true);
-    }
+    } // Click events that start and end in different elements are triggered on
+    // the first common ancestor. When one of those elements is the backdrop,
+    // the modal wrapper receives the event. To prevent the modal from
+    // dismissing unexpectedly when this happens we are separately subscribing
+    // to the mousedown and mouseup events so that we can detect this situation
+    // and ensure that the modal is only dismissed when a click starts and
+    // ends on the backdrop.
+
   }, {
-    key: "handleClickWrapper",
-    value: function handleClickWrapper(_ref) {
+    key: "handleMouseDown",
+    value: function handleMouseDown(_ref) {
       var target = _ref.target;
-      if (this.wrapper && target !== this.wrapper) return;
-      this.props.requestClose();
+      this.mouseDownElement = target;
+    }
+  }, {
+    key: "handleMouseUp",
+    value: function handleMouseUp(_ref2) {
+      var target = _ref2.target;
+
+      if (target === this.wrapper && this.mouseDownElement === this.wrapper) {
+        this.props.requestClose();
+      }
+
+      this.mouseDownElement = null;
     }
   }, {
     key: "handleKeyDown",
-    value: function handleKeyDown(_ref2) {
-      var key = _ref2.key;
+    value: function handleKeyDown(_ref3) {
+      var key = _ref3.key;
       if (this.props.isOpen && key === 'Escape') this.props.requestClose();
     }
   }, {
@@ -145,18 +163,17 @@ var Modal = /*#__PURE__*/function (_Component) {
           maxWidth = _this$props.maxWidth,
           padding = _this$props.padding,
           zIndex = _this$props.zIndex;
-      var paddingClass = "padding--".concat(padding);
-      var innerClassName = (0, _class_names.default)('Container--Inner', paddingClass);
-      var modalClassName = (0, _class_names.default)('Container Modal Modal--animation', {
+      var modalClassName = (0, _class_names.default)('Container', 'Modal', "padding--".concat(padding), {
         'Modal--hidden': !isOpen
       });
-      var wrapperClassName = (0, _class_names.default)('Modal__Wrapper', (_classNames = {}, _defineProperty(_classNames, "Modal__Wrapper--backdrop--".concat(backdropColor), backdropColor), _defineProperty(_classNames, 'Modal__Wrapper--hidden', !isOpen), _classNames));
+      var wrapperClassName = (0, _class_names.default)('Modal__Wrapper', (_classNames = {}, _defineProperty(_classNames, "Modal__Wrapper--backdrop-".concat(backdropColor), backdropColor), _defineProperty(_classNames, 'Modal__Wrapper--hidden', !isOpen), _classNames));
       return _react.default.createElement("div", {
         className: wrapperClassName,
-        onClick: this.handleClickWrapper,
         onKeyDown: this.handleKeyDown,
-        ref: function ref(_ref3) {
-          _this2.wrapper = _ref3;
+        onMouseDown: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp,
+        ref: function ref(_ref4) {
+          _this2.wrapper = _ref4;
         },
         style: {
           zIndex: zIndex
@@ -183,9 +200,7 @@ var Modal = /*#__PURE__*/function (_Component) {
           maxWidth: maxWidth
         },
         tabIndex: isOpen ? -1 : undefined
-      }, _react.default.createElement("div", {
-        className: innerClassName
-      }, this.props.children)));
+      }, this.props.children));
     }
   }]);
 
@@ -209,7 +224,16 @@ Modal.__docgenInfo = {
     "params": [],
     "returns": null
   }, {
-    "name": "handleClickWrapper",
+    "name": "handleMouseDown",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "{ target }",
+      "type": null
+    }],
+    "returns": null
+  }, {
+    "name": "handleMouseUp",
     "docblock": null,
     "modifiers": [],
     "params": [{
@@ -262,6 +286,9 @@ Modal.__docgenInfo = {
         }, {
           "value": "'1'",
           "computed": false
+        }, {
+          "value": "'1.25'",
+          "computed": false
         }, {
           "value": "'1.5'",
           "computed": false

package/lib/components/tags_input.js

@@ -159,9 +159,9 @@ var TagsInput = /*#__PURE__*/function (_Component) {
         'Input--filled': tags.length || value,
         'Input--focused': focused,
         'Input--invalid': invalid,
-        'max-height--2': maxHeight === 'small',
-        'max-height--3': maxHeight === 'medium',
-        'max-height--6': maxHeight === 'large'
+        'max-height--4': maxHeight === 'small',
+        'max-height--6': maxHeight === 'medium',
+        'max-height--12': maxHeight === 'large'
       });
       return _react.default.createElement("div", {
         className: className,