@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/lib/components/radio_input.js

@@ -15,6 +15,8 @@ var _refs = require("../utils/refs");
 
 var _forms = require("../utils/forms");
 
+var _radio_circle = _interopRequireDefault(require("../icons/radio_circle"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var propTypes = {
@@ -52,8 +54,8 @@ function RadioInput(_ref) {
       tabIndex = _ref.tabIndex,
       value = _ref.value;
   var radioId = (0, _forms.looksUnique)(id) ? id : (0, _forms.unique)(id);
-  var className = (0, _class_names.default)('field-select', _modifierClass, {
-    'with-label': label
+  var className = (0, _class_names.default)('Selector', _modifierClass, {
+    'Selector--with-label': label
   });
   return _react.default.createElement("div", {
     className: className
@@ -63,6 +65,7 @@ function RadioInput(_ref) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     checked: checked,
+    className: "Selector__Radio",
     disabled: disabled,
     id: radioId,
     name: name,
@@ -73,14 +76,139 @@ function RadioInput(_ref) {
     type: "radio",
     value: (0, _forms.inputValue)(value, onChange)
   }), _react.default.createElement("label", {
-    className: "input-field",
+    className: "Selector__Field",
     htmlFor: radioId
   }), label && _react.default.createElement("label", {
-    className: "input-label",
+    className: "Selector__Label",
     htmlFor: radioId
-  }, label));
+  }, label), _react.default.createElement(_radio_circle.default, {
+    "aria-hidden": true
+  }));
 }
 
 RadioInput.propTypes = propTypes;
+RadioInput.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "RadioInput",
+  "props": {
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-invalid": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "bool"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "checked": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "label": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "readOnly": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "tabIndex": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = RadioInput;
 exports.default = _default;

package/lib/components/range_input.js

@@ -35,9 +35,9 @@ var propTypes = {
   value: inputAttribute
 };
 
-function renderMinOrMax(value, float) {
-  var className = "color--main-light font-size--s margin--none ".concat(float);
-  return _react.default.createElement("p", {
+function renderMinOrMax(value) {
+  var className = "color--gray-1 font-size--s margin--none";
+  return _react.default.createElement("div", {
     className: className
   }, value);
 }
@@ -66,7 +66,7 @@ function RangeInput(_ref) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     autoComplete: autoComplete,
-    className: "margin-t--s margin-b--base",
+    className: "Range margin-t--0.75 margin-b--1",
     id: id,
     max: maximum || 100,
     min: minimum || 0,
@@ -77,9 +77,132 @@ function RangeInput(_ref) {
     type: "range",
     disabled: disabled,
     value: value
-  }), (0, _types.exists)(minimum) && renderMinOrMax(minimum, 'float--l'), (0, _types.exists)(maximum) && renderMinOrMax(maximum, 'float--r'));
+  }), ((0, _types.exists)(minimum) || (0, _types.exists)(maximum)) && _react.default.createElement("div", {
+    className: "flex justify--between"
+  }, renderMinOrMax(minimum), renderMinOrMax(maximum)));
 }
 
 RangeInput.propTypes = propTypes;
+RangeInput.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "RangeInput",
+  "props": {
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-invalid": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "bool"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "autoComplete": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "maximum": {
+      "type": {
+        "name": "custom",
+        "raw": "inputAttribute"
+      },
+      "required": false,
+      "description": ""
+    },
+    "minimum": {
+      "type": {
+        "name": "custom",
+        "raw": "inputAttribute"
+      },
+      "required": false,
+      "description": ""
+    },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "tabIndex": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "type": {
+        "name": "custom",
+        "raw": "inputAttribute"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = RangeInput;
 exports.default = _default;

package/lib/components/row.js

@@ -21,6 +21,7 @@ var propTypes = {
   'aria-labelledby': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string,
   children: _propTypes.default.node.isRequired,
+  columnGap: _propTypes.default.oneOf(['none', 'tiny', 'small', 'default']),
   getRef: _refs.getRefPropType,
   id: _propTypes.default.string
 };
@@ -31,18 +32,102 @@ function Row(_ref) {
       ariaLabelledby = _ref['aria-labelledby'],
       ariaDescribedby = _ref['aria-describedby'],
       children = _ref.children,
+      _ref$columnGap = _ref.columnGap,
+      columnGap = _ref$columnGap === void 0 ? 'default' : _ref$columnGap,
       getRef = _ref.getRef,
       id = _ref.id;
+  var rowClassNames = (0, _class_names.default)('Row', "Row--column-gap--".concat(columnGap), _modifierClass);
   return _react.default.createElement("div", {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
-    className: (0, _class_names.default)('row', _modifierClass),
+    className: rowClassNames,
     id: id,
     ref: getRef
   }, children);
 }
 
 Row.propTypes = propTypes;
+Row.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Row",
+  "props": {
+    "columnGap": {
+      "defaultValue": {
+        "value": "'default'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'none'",
+          "computed": false
+        }, {
+          "value": "'tiny'",
+          "computed": false
+        }, {
+          "value": "'small'",
+          "computed": false
+        }, {
+          "value": "'default'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": true,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = Row;
 exports.default = _default;

package/lib/components/search_input.js

@@ -28,6 +28,7 @@ var propTypes = {
   disabled: _propTypes.default.bool,
   getRef: _refs.getRefPropType,
   id: _props.numberOrString,
+  invalid: _propTypes.default.bool,
   mini: _propTypes.default.bool,
   name: _propTypes.default.string,
   onBlur: _propTypes.default.func,
@@ -52,6 +53,7 @@ function SearchInput(_ref) {
       disabled = _ref.disabled,
       getRef = _ref.getRef,
       id = _ref.id,
+      invalid = _ref.invalid,
       mini = _ref.mini,
       name = _ref.name,
       onBlur = _ref.onBlur,
@@ -75,6 +77,7 @@ function SearchInput(_ref) {
     disabled: disabled,
     getRef: getRef,
     id: id,
+    invalid: invalid,
     mini: mini,
     name: name,
     onBlur: onBlur,
@@ -91,5 +94,177 @@ function SearchInput(_ref) {
 }
 
 SearchInput.propTypes = propTypes;
+SearchInput.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SearchInput",
+  "props": {
+    "placeholder": {
+      "defaultValue": {
+        "value": "'Search'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-invalid": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "bool"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "autoComplete": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "autoFocus": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "custom",
+        "raw": "numberOrString"
+      },
+      "required": false,
+      "description": ""
+    },
+    "invalid": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "mini": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onBlur": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onFocus": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onKeyDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onPaste": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "readOnly": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "tabIndex": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = SearchInput;
 exports.default = _default;

package/lib/components/segmented_controls.js

@@ -37,12 +37,69 @@ function SegmentedControls(_ref) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
-    className: (0, _class_names.default)('segmented-controls', _modifierClass),
+    className: (0, _class_names.default)('Segmented-Controls', _modifierClass),
     id: id,
     ref: getRef
   }, children);
 }
 
 SegmentedControls.propTypes = propTypes;
+SegmentedControls.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SegmentedControls",
+  "props": {
+    "_modifierClass": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-labelledby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-describedby": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = SegmentedControls;
 exports.default = _default;