@dscout/particle 0.46.2 → 1.0.0-alpha.2

package/lib/components/textarea.js

@@ -67,17 +67,15 @@ function Textarea(_ref) {
       placeholder = _ref.placeholder,
       readOnly = _ref.readOnly,
       value = _ref.value;
-  var textareaClassName = (0, _class_names.default)('vert', {
-    filled: value,
-    'height--2': height === 'small',
-    'height--3': height === 'medium',
-    'height--6': height === 'large'
+  var textareaClassName = (0, _class_names.default)('Input', 'resize--vertical', _modifierClass, {
+    'Input--filled': value,
+    'Input--invalid': invalid,
+    'height--4': height === 'small',
+    'height--6': height === 'medium',
+    'height--8': !height,
+    'height--12': height === 'large'
   });
-  return _react.default.createElement("div", {
-    className: (0, _class_names.default)('field', _modifierClass, {
-      invalid: invalid
-    })
-  }, _react.default.createElement("textarea", {
+  return _react.default.createElement("textarea", {
     "aria-describedby": ariaDescribedby,
     "aria-invalid": ariaInvalid,
     "aria-label": ariaLabel,
@@ -98,9 +96,187 @@ function Textarea(_ref) {
     readOnly: readOnly,
     ref: getRef,
     value: (0, _forms.inputValue)(value, onChange)
-  }));
+  });
 }
 
 Textarea.propTypes = propTypes;
+Textarea.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Textarea",
+  "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": ""
+    },
+    "autoFocus": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "height": {
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'small'",
+          "computed": false
+        }, {
+          "value": "'medium'",
+          "computed": false
+        }, {
+          "value": "'large'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "invalid": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "maxLength": {
+      "type": {
+        "name": "custom",
+        "raw": "numberOrString"
+      },
+      "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": ""
+    },
+    "placeholder": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "readOnly": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = Textarea;
 exports.default = _default;

package/lib/components/theme_provider.js

@@ -0,0 +1,172 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ThemeContext = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _class_names = _interopRequireDefault(require("../utils/class_names"));
+
+var _excluded = ["as", "children", "className", "name", "setOnBody"];
+
+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; }
+
+var propTypes = {
+  /**
+  The root DOM element type to render.
+  */
+  as: _propTypes.default.string,
+  children: _propTypes.default.node,
+
+  /** Class name to apply to root DOM element rendered by this component. */
+  className: _propTypes.default.string,
+
+  /**
+  Name of the theme to apply.
+  */
+  name: _propTypes.default.string,
+
+  /**
+  Set the theme class on the `<body>` instead of the DOM element rendered by
+  this component. Use this on the top-level `<ThemeProvider />`.
+  */
+  setOnBody: _propTypes.default.bool
+};
+var THEMES = {
+  RESEARCHER: 'researcher',
+  BANDIT: 'bandit'
+};
+
+var ThemeContext = _react.default.createContext(THEMES.RESEARCHER);
+/**
+Use the `<ThemeProvider />` to apply a theme to Particle. Particle is
+largely unstyled without a defined theme, so each app will need to render a
+`<ThemeProvider />` at the top level. The top-level provider should use the
+`setOnBody` prop to set the theme class on the body element.
+
+Themes can be nested to apply a different theme to only a subsection of an
+interface. Do not apply the `setOnBody` prop for nested themes.
+
+The `<ThemeProvider />` also renders a React context provider, so descendants
+can use `ThemeContext` to customize their behavior based on the theme. For
+example:
+
+```jsx
+import React, { useContext } from 'react';
+import { ThemeContext } from '@dscout/particle';
+
+function Descendant() {
+  const theme = useContext(ThemeContext)
+
+  return (
+    <p>I'm in the {theme} theme!</p>
+  );
+}
+```
+*/
+
+
+exports.ThemeContext = ThemeContext;
+
+function ThemeProvider(_ref) {
+  var _ref$as = _ref.as,
+      ElementToRenderAs = _ref$as === void 0 ? 'div' : _ref$as,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? THEMES.RESEARCHER : _ref$name,
+      _ref$setOnBody = _ref.setOnBody,
+      setOnBody = _ref$setOnBody === void 0 ? false : _ref$setOnBody,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var themeClass = name ? "theme--".concat(name) : '';
+  (0, _react.useLayoutEffect)(function () {
+    if (setOnBody) {
+      document.body.classList.add(themeClass);
+      return function () {
+        document.body.classList.remove(themeClass);
+      };
+    }
+  }, [themeClass, setOnBody]);
+  return _react.default.createElement(ElementToRenderAs, _extends({
+    className: (0, _class_names.default)(className, _defineProperty({}, themeClass, !setOnBody))
+  }, props), _react.default.createElement(ThemeContext.Provider, {
+    value: name
+  }, children));
+}
+
+ThemeProvider.propTypes = propTypes;
+ThemeProvider.__docgenInfo = {
+  "description": "Use the `<ThemeProvider />` to apply a theme to Particle. Particle is\nlargely unstyled without a defined theme, so each app will need to render a\n`<ThemeProvider />` at the top level. The top-level provider should use the\n`setOnBody` prop to set the theme class on the body element.\n\nThemes can be nested to apply a different theme to only a subsection of an\ninterface. Do not apply the `setOnBody` prop for nested themes.\n\nThe `<ThemeProvider />` also renders a React context provider, so descendants\ncan use `ThemeContext` to customize their behavior based on the theme. For\nexample:\n\n```jsx\nimport React, { useContext } from 'react';\nimport { ThemeContext } from '@dscout/particle';\n\nfunction Descendant() {\n  const theme = useContext(ThemeContext)\n\n  return (\n    <p>I'm in the {theme} theme!</p>\n  );\n}\n```",
+  "methods": [],
+  "displayName": "ThemeProvider",
+  "props": {
+    "as": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "The root DOM element type to render."
+    },
+    "name": {
+      "defaultValue": {
+        "value": "'researcher'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Name of the theme to apply."
+    },
+    "setOnBody": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Set the theme class on the `<body>` instead of the DOM element rendered by\n  this component. Use this on the top-level `<ThemeProvider />`."
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    },
+    "className": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Class name to apply to root DOM element rendered by this component."
+    }
+  }
+};
+var _default = ThemeProvider;
+exports.default = _default;

package/lib/components/thumbnail.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,13 +17,19 @@ var _refs = require("../utils/refs");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(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."); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -84,11 +92,11 @@ function Thumbnail(_ref) {
       image.removeEventListener('load', handleLoad);
     };
   }, [imageUrl]);
-  var thumbnailClassNames = (0, _class_names.default)('card-thumbnail', _modifierClass, {
-    circular: circular
+  var thumbnailClassNames = (0, _class_names.default)('Card__Thumbnail', _modifierClass, {
+    'Card__Thumbnail--circular': circular
   });
-  var wrapperClassNames = (0, _class_names.default)('card-thumbnail--wrapper', _modifierClass, {
-    circular: circular
+  var wrapperClassNames = (0, _class_names.default)('Card__Thumbnail--wrapper', _modifierClass, {
+    'Card__Thumbnail--wrapper-circular': circular
   });
   return _react.default.createElement("div", {
     "aria-label": ariaLabel,
@@ -107,5 +115,83 @@ function Thumbnail(_ref) {
 }
 
 Thumbnail.propTypes = propTypes;
+Thumbnail.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Thumbnail",
+  "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": ""
+    },
+    "circular": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "fallbackUrl": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "getRef": {
+      "type": {
+        "name": "custom",
+        "raw": "getRefPropType"
+      },
+      "required": false,
+      "description": ""
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "imageUrl": {
+      "type": {
+        "name": "string"
+      },
+      "required": true,
+      "description": ""
+    },
+    "ratio": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
 var _default = Thumbnail;
 exports.default = _default;

package/lib/components/togglable_fieldset.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _class_names = _interopRequireDefault(require("../utils/class_names"));
-
 var _refs = require("../utils/refs");
 
 var _forms = require("../utils/forms");
@@ -19,8 +17,6 @@ var _collapsible_content = _interopRequireDefault(require("./collapsible_content
 
 var _flex = _interopRequireDefault(require("./flex"));
 
-var _fieldset = _interopRequireDefault(require("./fieldset"));
-
 var _modifier = _interopRequireDefault(require("./modifier"));
 
 var _toggle = _interopRequireDefault(require("./toggle"));
@@ -36,7 +32,6 @@ var propTypes = {
   disabled: _propTypes.default.bool,
   getRef: _refs.getRefPropType,
   id: _propTypes.default.string,
-  invalid: _propTypes.default.bool,
   label: _propTypes.default.node.isRequired,
   name: _propTypes.default.string,
   onChange: _propTypes.default.func,
@@ -53,7 +48,6 @@ function TogglableFieldset(_ref) {
       disabled = _ref.disabled,
       getRef = _ref.getRef,
       id = _ref.id,
-      invalid = _ref.invalid,
       label = _ref.label,
       name = _ref.name,
       onChange = _ref.onChange,
@@ -64,7 +58,7 @@ function TogglableFieldset(_ref) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
-    className: (0, _class_names.default)('fieldset', _modifierClass),
+    className: _modifierClass,
     ref: getRef
   }, _react.default.createElement(_modifier.default, {
     margin: {
@@ -84,16 +78,118 @@ function TogglableFieldset(_ref) {
     value: value
   }))), _react.default.createElement(_collapsible_content.default, {
     collapsed: !toggled
-  }, _react.default.createElement(_modifier.default, {
-    margin: {
-      top: 'base'
-    }
-  }, _react.default.createElement(_fieldset.default, {
-    invalid: invalid,
+  }, _react.default.createElement("fieldset", {
+    className: "margin-t--2",
     disabled: disabled
-  }, children))));
+  }, children)));
 }
 
 TogglableFieldset.propTypes = propTypes;
+TogglableFieldset.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TogglableFieldset",
+  "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": ""
+    },
+    "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": true,
+      "description": ""
+    },
+    "name": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "toggled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "bool"
+        }, {
+          "name": "number"
+        }, {
+          "name": "string"
+        }]
+      },
+      "required": true,
+      "description": ""
+    }
+  }
+};
 var _default = TogglableFieldset;
 exports.default = _default;