@hig/text-area - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

build/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { generateId } from '@hig/utils';
+import Input from '@hig/input';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _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; };
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function getWebLightBorders(props, themeData) {
+  var isDisabled = props.isDisabled,
+      hasFocus = props.hasFocus,
+      hasHover = props.hasHover;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var TextAreaPresenter = function (_Component) {
-  _inherits(TextAreaPresenter, _Component);
-
-  function TextAreaPresenter() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, TextAreaPresenter);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextAreaPresenter.__proto__ || Object.getPrototypeOf(TextAreaPresenter)).call.apply(_ref, [this].concat(args))), _this), _this.id = generateId("text-area"), _temp), _possibleConstructorReturn(_this, _ret);
+  if (hasFocus) {
+    return themeData["input.focus.borderBottomColor"];
   }
+  if (hasHover && !isDisabled) {
+    return themeData["input.hover.borderBottomColor"];
+  }
+  return themeData["input.borderColor"];
+}
 
-  _createClass(TextAreaPresenter, [{
-    key: "hasValue",
-    value: function hasValue() {
-      if (this.props.defaultValue || this.props.value) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          defaultValue = _props.defaultValue,
-          disabled = _props.disabled,
-          instructions = _props.instructions,
-          label = _props.label,
-          maxLength = _props.maxLength,
-          minLength = _props.minLength,
-          name = _props.name,
-          onBlur = _props.onBlur,
-          onChange = _props.onChange,
-          onFocus = _props.onFocus,
-          onInput = _props.onInput,
-          placeholder = _props.placeholder,
-          readOnly = _props.readOnly,
-          required = _props.required,
-          type = _props.type,
-          value = _props.value;
+function stylesheetOverride(stylesheet, props, themeData, theme) {
+  var borderStyles = props.variant === "line" ? "rgba(128, 128, 128, 0.2)" : themeData["input.borderColor"];
+  var textAreaWrapper = theme === "hig-light" ? _extends({}, stylesheet.wrapper, {
+    borderColor: getWebLightBorders(props, themeData),
+    borderBottomColor: getWebLightBorders(props, themeData)
+  }) : _extends({}, stylesheet.wrapper, {
+    borderLeftColor: borderStyles,
+    borderRightColor: borderStyles,
+    borderTopColor: borderStyles
+  });
+  var textArea = _extends({}, stylesheet.input, {
+    display: "block",
+    resize: "none",
+    padding: themeData["input.verticalPadding"] + "\n      " + themeData["input.boxType.horizontalPadding"]
+  });
+  return _extends({}, stylesheet, {
+    wrapper: textAreaWrapper,
+    input: textArea
+  });
+}
 
+var _extends$1 = 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; };
 
-      var hasValue = this.hasValue();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-      var wrapperClasses = cx(["hig__text-area", {
-        "hig__text-area--required": required,
-        "hig__text-area--disabled": disabled
-      }]);
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-      var textAreaClasses = cx(["hig__text-area__field", {
-        "hig__text-area__field--no-value": !hasValue,
-        "hig__text-area__field--has-value": hasValue
-      }]);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-      var labelClasses = cx(["hig__text-area__label", {
-        "hig__text-area__label--visible": label
-      }]);
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-      var instructionClasses = cx(["hig__text-area__instructions", {
-        "hig__text-area__instructions--visible": instructions
-      }]);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-      var requiredClasses = cx(["hig__text-area__required-notice"]);
+var variantTypes = ["line", "box"];
 
-      var id = this.id;
-
-
-      return React.createElement(
-        "div",
-        { className: wrapperClasses },
-        React.createElement("textarea", {
-          className: textAreaClasses,
-          defaultValue: defaultValue,
-          disabled: disabled,
-          id: id,
-          maxLength: maxLength,
-          minLength: minLength,
-          name: name,
-          onBlur: onBlur,
-          onChange: onChange,
-          onFocus: onFocus,
-          onInput: onInput,
-          placeholder: placeholder,
-          readOnly: readOnly,
-          required: required,
-          type: type,
-          value: value
-        }),
-        React.createElement("label", {
-          htmlFor: id,
-          className: labelClasses
-          /* eslint-disable-next-line react/no-danger */
-          , dangerouslySetInnerHTML: { __html: label }
-        }),
-        React.createElement("p", {
-          className: instructionClasses
-          /* eslint-disable-next-line react/no-danger */
-          , dangerouslySetInnerHTML: { __html: instructions }
-        }),
-        React.createElement("p", {
-          className: requiredClasses
-          /* eslint-disable-next-line react/no-danger */
-          , dangerouslySetInnerHTML: { __html: required }
-        })
-      );
-    }
-  }]);
-
-  return TextAreaPresenter;
-}(Component);
-
-TextAreaPresenter.propTypes = {
-  /**
-   * Initial value of the field
-   */
-  defaultValue: PropTypes.string,
-  /**
-   * Prevents user actions on the field
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Instructional text for the field
-   */
-  instructions: PropTypes.string,
-  /**
-   * Text describing what the field represents
-   */
-  label: PropTypes.string,
-  /**
-   * Indicates the maximum number of characters the user can enter
-   */
-  maxLength: PropTypes.number,
-  /**
-   * Indicates the minimum number of characters the user can enter
-   */
-  minLength: PropTypes.number,
-  /**
-   * Name of the field when submitted with a form
-   */
-  name: PropTypes.string,
-  /**
-   * Called when user moves focus from the field
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Called after user changes the value of the field
-   */
-  onChange: PropTypes.func,
-  /**
-   * Called when user puts focus onto the field
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Called as user changes the value of the field
-   */
-  onInput: PropTypes.func,
-  /**
-   * Example of what the user should type into the field
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Determines whether the user can modify the value of the control
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Text describing why the field is required
-   */
-  required: PropTypes.string,
-  /**
-   * Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example.
-   */
-  type: PropTypes.string,
-  /**
-   * Initial value of the field
-   */
-  value: PropTypes.string
-};
-TextAreaPresenter.defaultProps = {
-  label: "Comments",
-  placeholder: "Enter your comments here.",
-  required: "This field is required."
-};
-TextAreaPresenter.__docgenInfo = {
-  "description": "",
-  "displayName": "TextAreaPresenter",
-  "props": {
-    "defaultValue": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
-    },
-    "disabled": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Prevents user actions on the field"
-    },
-    "instructions": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Instructional text for the field"
-    },
-    "label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing what the field represents",
-      "defaultValue": {
-        "value": "\"Comments\"",
-        "computed": false
-      }
-    },
-    "maxLength": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Indicates the maximum number of characters the user can enter"
-    },
-    "minLength": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Indicates the minimum number of characters the user can enter"
-    },
-    "name": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Name of the field when submitted with a form"
-    },
-    "onBlur": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user moves focus from the field"
-    },
-    "onChange": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called after user changes the value of the field"
-    },
-    "onFocus": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user puts focus onto the field"
-    },
-    "onInput": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called as user changes the value of the field"
-    },
-    "placeholder": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Example of what the user should type into the field",
-      "defaultValue": {
-        "value": "\"Enter your comments here.\"",
-        "computed": false
-      }
-    },
-    "readOnly": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Determines whether the user can modify the value of the control"
-    },
-    "required": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing why the field is required",
-      "defaultValue": {
-        "value": "\"This field is required.\"",
-        "computed": false
-      }
-    },
-    "type": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example."
-    },
-    "value": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
-    }
-  }
-};
-
-var _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; };
-
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var TextArea = function (_Component) {
-  _inherits$1(TextArea, _Component);
+  _inherits(TextArea, _Component);
 
   function TextArea() {
-    var _ref;
+    _classCallCheck(this, TextArea);
 
-    var _temp, _this, _ret;
-
-    _classCallCheck$1(this, TextArea);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = TextArea.__proto__ || Object.getPrototypeOf(TextArea)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      value: _this.props.defaultValue
-    }, _this.handleChange = function (event) {
-      if (_this.props.onChange) {
-        _this.props.onChange(event);
-      }
-
-      _this.setState({
-        value: event.target.value
-      });
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+    return _possibleConstructorReturn(this, (TextArea.__proto__ || Object.getPrototypeOf(TextArea)).apply(this, arguments));
   }
 
-  _createClass$1(TextArea, [{
-    key: "renderValue",
-    value: function renderValue() {
-      if (this.props.value !== undefined) {
-        return this.props.value;
-      }
-      return this.state.value;
-    }
-  }, {
+  _createClass(TextArea, [{
     key: "render",
     value: function render() {
-      return React.createElement(TextAreaPresenter, _extends({}, this.props, {
-        value: this.renderValue(),
-        onChange: this.handleChange
-      }));
+      var _props = this.props,
+          variant = _props.variant,
+          otherProps = _objectWithoutProperties(_props, ["variant"]);
+
+      return React.createElement(Input, _extends$1({
+        stylesheet: stylesheetOverride,
+        tagName: "textarea",
+        variant: variant
+      }, otherProps));
     }
@@ -391,37 +84,2 @@ }]);
 TextArea.propTypes = {
-  /**
-   * Initial value of the field
-   */
-  defaultValue: PropTypes.string,
-  /**
-   * Prevents user actions on the field
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Error text for the field. Setting this value applies error styling to the entire component.
-   */
-  errors: PropTypes.string,
-  /**
-   * When true, displays passed error text. When false, displays instructions with error styling.
-   */
-  hideInstructionsOnErrors: PropTypes.bool,
-  /**
-   * HTML ID attribute
-   */
-  id: PropTypes.string,
-  /**
-   * Instructional text for the field
-   */
-  instructions: PropTypes.string,
-  /**
-   * Text describing what the field represents
-   */
-  label: PropTypes.string,
-  /**
-   * Name of the field when submitted with a form
-   */
-  name: PropTypes.string,
-  /**
-   * Called when user moves focus from the field
-   */
   onBlur: PropTypes.func,
@@ -441,18 +99,9 @@ /**
   /**
-   * Example of what the user should type into the field
+   * The visual variant of the textarea
    */
-  placeholder: PropTypes.string,
-  /**
-   * Text describing why the field is required
-   */
-  required: PropTypes.string,
-  /**
-   * Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example.
-   */
-  type: PropTypes.string,
-  /**
-   * Initial value of the field
-   */
-  value: PropTypes.string
+  variant: PropTypes.oneOf(variantTypes)
 };
+TextArea.defaultProps = {
+  variant: "line"
+};
 TextArea.__docgenInfo = {
@@ -462,58 +111,2 @@ "description": "",
   "props": {
-    "defaultValue": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
-    },
-    "disabled": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Prevents user actions on the field"
-    },
-    "errors": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Error text for the field. Setting this value applies error styling to the entire component."
-    },
-    "hideInstructionsOnErrors": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "When true, displays passed error text. When false, displays instructions with error styling."
-    },
-    "id": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "HTML ID attribute"
-    },
-    "instructions": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Instructional text for the field"
-    },
-    "label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing what the field represents"
-    },
-    "name": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Name of the field when submitted with a form"
-    },
     "onBlur": {
@@ -524,3 +117,3 @@ "type": {
       "required": false,
-      "description": "Called when user moves focus from the field"
+      "description": ""
     },
@@ -548,29 +141,19 @@ "onChange": {
     },
-    "placeholder": {
+    "variant": {
       "type": {
-        "name": "string"
+        "name": "enum",
+        "value": [{
+          "value": "\"line\"",
+          "computed": false
+        }, {
+          "value": "\"box\"",
+          "computed": false
+        }]
       },
       "required": false,
-      "description": "Example of what the user should type into the field"
-    },
-    "required": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing why the field is required"
-    },
-    "type": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example."
-    },
-    "value": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
+      "description": "The visual variant of the textarea",
+      "defaultValue": {
+        "value": "\"line\"",
+        "computed": false
+      }
     }
@@ -577,0 +160,0 @@ }

build/index.js

@@ -10,383 +10,76 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
-var cx = _interopDefault(require('classnames'));
-var utils = require('@hig/utils');
+var Input = _interopDefault(require('@hig/input'));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _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; };
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function getWebLightBorders(props, themeData) {
+  var isDisabled = props.isDisabled,
+      hasFocus = props.hasFocus,
+      hasHover = props.hasHover;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var TextAreaPresenter = function (_Component) {
-  _inherits(TextAreaPresenter, _Component);
-
-  function TextAreaPresenter() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, TextAreaPresenter);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextAreaPresenter.__proto__ || Object.getPrototypeOf(TextAreaPresenter)).call.apply(_ref, [this].concat(args))), _this), _this.id = utils.generateId("text-area"), _temp), _possibleConstructorReturn(_this, _ret);
+  if (hasFocus) {
+    return themeData["input.focus.borderBottomColor"];
   }
+  if (hasHover && !isDisabled) {
+    return themeData["input.hover.borderBottomColor"];
+  }
+  return themeData["input.borderColor"];
+}
 
-  _createClass(TextAreaPresenter, [{
-    key: "hasValue",
-    value: function hasValue() {
-      if (this.props.defaultValue || this.props.value) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          defaultValue = _props.defaultValue,
-          disabled = _props.disabled,
-          instructions = _props.instructions,
-          label = _props.label,
-          maxLength = _props.maxLength,
-          minLength = _props.minLength,
-          name = _props.name,
-          onBlur = _props.onBlur,
-          onChange = _props.onChange,
-          onFocus = _props.onFocus,
-          onInput = _props.onInput,
-          placeholder = _props.placeholder,
-          readOnly = _props.readOnly,
-          required = _props.required,
-          type = _props.type,
-          value = _props.value;
+function stylesheetOverride(stylesheet, props, themeData, theme) {
+  var borderStyles = props.variant === "line" ? "rgba(128, 128, 128, 0.2)" : themeData["input.borderColor"];
+  var textAreaWrapper = theme === "hig-light" ? _extends({}, stylesheet.wrapper, {
+    borderColor: getWebLightBorders(props, themeData),
+    borderBottomColor: getWebLightBorders(props, themeData)
+  }) : _extends({}, stylesheet.wrapper, {
+    borderLeftColor: borderStyles,
+    borderRightColor: borderStyles,
+    borderTopColor: borderStyles
+  });
+  var textArea = _extends({}, stylesheet.input, {
+    display: "block",
+    resize: "none",
+    padding: themeData["input.verticalPadding"] + "\n      " + themeData["input.boxType.horizontalPadding"]
+  });
+  return _extends({}, stylesheet, {
+    wrapper: textAreaWrapper,
+    input: textArea
+  });
+}
 
+var _extends$1 = 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; };
 
-      var hasValue = this.hasValue();
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-      var wrapperClasses = cx(["hig__text-area", {
-        "hig__text-area--required": required,
-        "hig__text-area--disabled": disabled
-      }]);
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-      var textAreaClasses = cx(["hig__text-area__field", {
-        "hig__text-area__field--no-value": !hasValue,
-        "hig__text-area__field--has-value": hasValue
-      }]);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-      var labelClasses = cx(["hig__text-area__label", {
-        "hig__text-area__label--visible": label
-      }]);
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-      var instructionClasses = cx(["hig__text-area__instructions", {
-        "hig__text-area__instructions--visible": instructions
-      }]);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-      var requiredClasses = cx(["hig__text-area__required-notice"]);
+var variantTypes = ["line", "box"];
 
-      var id = this.id;
-
-
-      return React__default.createElement(
-        "div",
-        { className: wrapperClasses },
-        React__default.createElement("textarea", {
-          className: textAreaClasses,
-          defaultValue: defaultValue,
-          disabled: disabled,
-          id: id,
-          maxLength: maxLength,
-          minLength: minLength,
-          name: name,
-          onBlur: onBlur,
-          onChange: onChange,
-          onFocus: onFocus,
-          onInput: onInput,
-          placeholder: placeholder,
-          readOnly: readOnly,
-          required: required,
-          type: type,
-          value: value
-        }),
-        React__default.createElement("label", {
-          htmlFor: id,
-          className: labelClasses
-          /* eslint-disable-next-line react/no-danger */
-          , dangerouslySetInnerHTML: { __html: label }
-        }),
-        React__default.createElement("p", {
-          className: instructionClasses
-          /* eslint-disable-next-line react/no-danger */
-          , dangerouslySetInnerHTML: { __html: instructions }
-        }),
-        React__default.createElement("p", {
-          className: requiredClasses
-          /* eslint-disable-next-line react/no-danger */
-          , dangerouslySetInnerHTML: { __html: required }
-        })
-      );
-    }
-  }]);
-
-  return TextAreaPresenter;
-}(React.Component);
-
-TextAreaPresenter.propTypes = {
-  /**
-   * Initial value of the field
-   */
-  defaultValue: PropTypes.string,
-  /**
-   * Prevents user actions on the field
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Instructional text for the field
-   */
-  instructions: PropTypes.string,
-  /**
-   * Text describing what the field represents
-   */
-  label: PropTypes.string,
-  /**
-   * Indicates the maximum number of characters the user can enter
-   */
-  maxLength: PropTypes.number,
-  /**
-   * Indicates the minimum number of characters the user can enter
-   */
-  minLength: PropTypes.number,
-  /**
-   * Name of the field when submitted with a form
-   */
-  name: PropTypes.string,
-  /**
-   * Called when user moves focus from the field
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Called after user changes the value of the field
-   */
-  onChange: PropTypes.func,
-  /**
-   * Called when user puts focus onto the field
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Called as user changes the value of the field
-   */
-  onInput: PropTypes.func,
-  /**
-   * Example of what the user should type into the field
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Determines whether the user can modify the value of the control
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Text describing why the field is required
-   */
-  required: PropTypes.string,
-  /**
-   * Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example.
-   */
-  type: PropTypes.string,
-  /**
-   * Initial value of the field
-   */
-  value: PropTypes.string
-};
-TextAreaPresenter.defaultProps = {
-  label: "Comments",
-  placeholder: "Enter your comments here.",
-  required: "This field is required."
-};
-TextAreaPresenter.__docgenInfo = {
-  "description": "",
-  "displayName": "TextAreaPresenter",
-  "props": {
-    "defaultValue": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
-    },
-    "disabled": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Prevents user actions on the field"
-    },
-    "instructions": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Instructional text for the field"
-    },
-    "label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing what the field represents",
-      "defaultValue": {
-        "value": "\"Comments\"",
-        "computed": false
-      }
-    },
-    "maxLength": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Indicates the maximum number of characters the user can enter"
-    },
-    "minLength": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Indicates the minimum number of characters the user can enter"
-    },
-    "name": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Name of the field when submitted with a form"
-    },
-    "onBlur": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user moves focus from the field"
-    },
-    "onChange": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called after user changes the value of the field"
-    },
-    "onFocus": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user puts focus onto the field"
-    },
-    "onInput": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called as user changes the value of the field"
-    },
-    "placeholder": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Example of what the user should type into the field",
-      "defaultValue": {
-        "value": "\"Enter your comments here.\"",
-        "computed": false
-      }
-    },
-    "readOnly": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Determines whether the user can modify the value of the control"
-    },
-    "required": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing why the field is required",
-      "defaultValue": {
-        "value": "\"This field is required.\"",
-        "computed": false
-      }
-    },
-    "type": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example."
-    },
-    "value": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
-    }
-  }
-};
-
-var _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; };
-
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var TextArea = function (_Component) {
-  _inherits$1(TextArea, _Component);
+  _inherits(TextArea, _Component);
 
   function TextArea() {
-    var _ref;
+    _classCallCheck(this, TextArea);
 
-    var _temp, _this, _ret;
-
-    _classCallCheck$1(this, TextArea);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = TextArea.__proto__ || Object.getPrototypeOf(TextArea)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      value: _this.props.defaultValue
-    }, _this.handleChange = function (event) {
-      if (_this.props.onChange) {
-        _this.props.onChange(event);
-      }
-
-      _this.setState({
-        value: event.target.value
-      });
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+    return _possibleConstructorReturn(this, (TextArea.__proto__ || Object.getPrototypeOf(TextArea)).apply(this, arguments));
   }
 
-  _createClass$1(TextArea, [{
-    key: "renderValue",
-    value: function renderValue() {
-      if (this.props.value !== undefined) {
-        return this.props.value;
-      }
-      return this.state.value;
-    }
-  }, {
+  _createClass(TextArea, [{
     key: "render",
     value: function render() {
-      return React__default.createElement(TextAreaPresenter, _extends({}, this.props, {
-        value: this.renderValue(),
-        onChange: this.handleChange
-      }));
+      var _props = this.props,
+          variant = _props.variant,
+          otherProps = _objectWithoutProperties(_props, ["variant"]);
+
+      return React__default.createElement(Input, _extends$1({
+        stylesheet: stylesheetOverride,
+        tagName: "textarea",
+        variant: variant
+      }, otherProps));
     }
@@ -399,37 +92,2 @@ }]);
 TextArea.propTypes = {
-  /**
-   * Initial value of the field
-   */
-  defaultValue: PropTypes.string,
-  /**
-   * Prevents user actions on the field
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Error text for the field. Setting this value applies error styling to the entire component.
-   */
-  errors: PropTypes.string,
-  /**
-   * When true, displays passed error text. When false, displays instructions with error styling.
-   */
-  hideInstructionsOnErrors: PropTypes.bool,
-  /**
-   * HTML ID attribute
-   */
-  id: PropTypes.string,
-  /**
-   * Instructional text for the field
-   */
-  instructions: PropTypes.string,
-  /**
-   * Text describing what the field represents
-   */
-  label: PropTypes.string,
-  /**
-   * Name of the field when submitted with a form
-   */
-  name: PropTypes.string,
-  /**
-   * Called when user moves focus from the field
-   */
   onBlur: PropTypes.func,
@@ -449,18 +107,9 @@ /**
   /**
-   * Example of what the user should type into the field
+   * The visual variant of the textarea
    */
-  placeholder: PropTypes.string,
-  /**
-   * Text describing why the field is required
-   */
-  required: PropTypes.string,
-  /**
-   * Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example.
-   */
-  type: PropTypes.string,
-  /**
-   * Initial value of the field
-   */
-  value: PropTypes.string
+  variant: PropTypes.oneOf(variantTypes)
 };
+TextArea.defaultProps = {
+  variant: "line"
+};
 TextArea.__docgenInfo = {
@@ -470,58 +119,2 @@ "description": "",
   "props": {
-    "defaultValue": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
-    },
-    "disabled": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Prevents user actions on the field"
-    },
-    "errors": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Error text for the field. Setting this value applies error styling to the entire component."
-    },
-    "hideInstructionsOnErrors": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "When true, displays passed error text. When false, displays instructions with error styling."
-    },
-    "id": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "HTML ID attribute"
-    },
-    "instructions": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Instructional text for the field"
-    },
-    "label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing what the field represents"
-    },
-    "name": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Name of the field when submitted with a form"
-    },
     "onBlur": {
@@ -532,3 +125,3 @@ "type": {
       "required": false,
-      "description": "Called when user moves focus from the field"
+      "description": ""
     },
@@ -556,29 +149,19 @@ "onChange": {
     },
-    "placeholder": {
+    "variant": {
       "type": {
-        "name": "string"
+        "name": "enum",
+        "value": [{
+          "value": "\"line\"",
+          "computed": false
+        }, {
+          "value": "\"box\"",
+          "computed": false
+        }]
       },
       "required": false,
-      "description": "Example of what the user should type into the field"
-    },
-    "required": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing why the field is required"
-    },
-    "type": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Corresponds to the type attribute of an <input>. Relevant for designating a password field, for example."
-    },
-    "value": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Initial value of the field"
+      "description": "The visual variant of the textarea",
+      "defaultValue": {
+        "value": "\"line\"",
+        "computed": false
+      }
     }
@@ -585,0 +168,0 @@ }

CHANGELOG.md

@@ -0,1 +1,16 @@
+# [@hig/text-area-v1.0.0](https://github.com/Autodesk/hig/compare/@hig/text-area@0.2.0...@hig/text-area@1.0.0) (2019-02-08)
+
+
+### Features
+
+* make text-area themeable ([65ea3bb](https://github.com/Autodesk/hig/commit/65ea3bb))
+
+
+### BREAKING CHANGES
+
+* * Removed the following props: instructions, label, defaultValue
+* Allow all native text-area html attributes to pass down
+* The web light default look now looks like the updated designs but with the legacy colors
+* The text-area component is now composed from an input component
+
 # [@hig/text-area-v0.2.0](https://github.com/Autodesk/hig/compare/@hig/text-area@0.1.2...@hig/text-area@0.2.0) (2018-10-31)
@@ -2,0 +17,0 @@

package.json

 {
   "name": "@hig/text-area",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "HIG Text Area",
@@ -16,3 +16,2 @@ "author": "Autodesk Inc.",
   "module": "build/index.es.js",
-  "style": "build/index.css",
   "files": [
@@ -22,4 +21,3 @@ "build/*"
   "dependencies": {
-    "@hig/utils": "^0.3.0",
-    "classnames": "^2.2.5",
+    "@hig/input": "^1.1.0",
     "prop-types": "^15.6.1"
@@ -35,4 +33,3 @@ },
     "@hig/scripts": "^0.1.2",
-    "@hig/semantic-release-config": "^0.1.0",
-    "@hig/styles": "^0.3.0"
+    "@hig/semantic-release-config": "^0.1.0"
   },
@@ -39,0 +36,0 @@ "scripts": {

README.md

@@ -15,7 +15,6 @@ # Text Area
 
-### Import the component and CSS
+### Import the component
 
 ```js
 import TextArea from '@hig/text-area';
-import '@hig/text-area/build/index.css';
 ```
@@ -27,6 +26,4 @@
 <TextArea
-  label="Tab title"
   placeholder="Foo"
-  required="This field is required."
 />
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-25%

Dev dependency count

5

decreased by-16.67%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

15931

decreased by-72.88%

Number of package files

5

decreased by-28.57%

Lines of code

286

decreased by-80.78%

Number of lines in readme file

28

decreased by-9.68%

Dependency changes

• + Added@hig/input@^1.1.0

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@hig/behaviors@1.1.1(transitive)

• + Added@hig/input@1.3.2(transitive)

• + Added@hig/theme-context@3.0.3(transitive)

• + Added@hig/theme-data@2.26.0(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@10.0.27(transitive)

• + Addedcreate-react-context@0.3.0(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@10.0.27(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedgud@1.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtinycolor2@1.6.0(transitive)

• + Addedwarning@4.0.3(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@hig/utils@^0.3.0

• - Removedclassnames@^2.2.5

• - Removed@hig/utils@0.3.0(transitive)

• - Removedclassnames@2.5.1(transitive)

• - Removedlodash.memoize@4.1.2(transitive)