@hig/slider - npm Package Compare versions

Comparing version 0.1.0-alpha.fc17111c to 0.1.0

build/index.es.js

@@ -1,5 +0,581 @@
-import { Range } from 'hig-react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { generateId } from '@hig/utils';
 
-Range.displayName = "Slider";
+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; };
 
-export default Range;
+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; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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 Input = function (_Component) {
+  _inherits(Input, _Component);
+
+  function Input() {
+    _classCallCheck(this, Input);
+
+    return _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
+  }
+
+  _createClass(Input, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          min = _props.min,
+          max = _props.max,
+          value = _props.value;
+
+
+      return React.createElement("input", _extends({
+        className: "hig__slider__input",
+        type: "range",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value
+      }, this.props));
+    }
+  }]);
+
+  return Input;
+}(Component);
+
+Input.propTypes = {
+  /**
+   * Prevents user actions on the field
+   */
+  disabled: PropTypes.bool,
+  /**
+   * HTML ID attribute
+   */
+  id: PropTypes.string,
+  /**
+   * Minimum value of the slider
+   */
+  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum value of the slider
+   */
+  max: PropTypes.oneOfType([PropTypes.string, 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,
+  /**
+   * The granularity of each step on the slider
+   */
+  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Value of the field
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Input.__docgenInfo = {
+  "description": "",
+  "displayName": "Input",
+  "props": {
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Prevents user actions on the field"
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "HTML ID attribute"
+    },
+    "min": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Minimum value of the slider"
+    },
+    "max": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Maximum value of the slider"
+    },
+    "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"
+    },
+    "step": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "The granularity of each step on the slider"
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Value of the field"
+    }
+  }
+};
+
+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 Slider = function (_Component) {
+  _inherits$1(Slider, _Component);
+
+  function Slider() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, Slider);
+
+    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 = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      value: _this.props.defaultValue
+    }, _this.handleChange = function (event) {
+      if (!_this.isControlled()) {
+        _this.updateValue(event.target.value);
+      }
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  /**
+   * @type {Object}
+   * @property {string|number} value
+   */
+
+
+  _createClass$1(Slider, [{
+    key: "getValue",
+
+
+    /**
+     * @returns {string|number}
+     */
+    value: function getValue() {
+      if (this.isControlled()) {
+        return this.props.value;
+      }
+
+      return this.state.value;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+
+  }, {
+    key: "isControlled",
+    value: function isControlled() {
+      return this.props.value !== undefined;
+    }
+
+    /**
+     * @param {string|number} value
+     */
+
+  }, {
+    key: "updateValue",
+    value: function updateValue(value) {
+      var onChange = this.props.onChange;
+
+
+      if (onChange) {
+        onChange(Number(value));
+      }
+
+      this.setState({ value: value });
+    }
+
+    /**
+     * @param {event} Event
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          id = _props.id,
+          name = _props.name,
+          label = _props.label,
+          instructions = _props.instructions,
+          required = _props.required,
+          disabled = _props.disabled,
+          min = _props.min,
+          max = _props.max,
+          step = _props.step,
+          onBlur = _props.onBlur,
+          onFocus = _props.onFocus,
+          onInput = _props.onInput;
+
+      var value = this.getValue();
+
+      return React.createElement(
+        "div",
+        {
+          className: cx("hig__slider", {
+            "hig__slider--disabled": disabled,
+            "hig__slider--required": required
+          })
+        },
+        React.createElement(
+          "div",
+          {
+            className: "hig__slider__wrapper",
+            "data-range-min": min,
+            "data-range-max": max
+          },
+          React.createElement(
+            "span",
+            { className: "hig__slider__current-value" },
+            value
+          ),
+          React.createElement(Input, {
+            id: id,
+            onChange: this.handleChange,
+            disabled: disabled,
+            name: name,
+            min: min,
+            max: max,
+            step: step,
+            value: value,
+            onBlur: onBlur,
+            onFocus: onFocus,
+            onInput: onInput
+          }),
+          label && React.createElement(
+            "label",
+            { htmlFor: id, className: "hig__slider__label" },
+            label
+          )
+        ),
+        instructions && React.createElement(
+          "p",
+          { className: "hig__slider__instructions" },
+          instructions
+        ),
+        required && React.createElement(
+          "p",
+          { className: "hig__slider__required-notice" },
+          required
+        )
+      );
+    }
+  }]);
+
+  return Slider;
+}(Component);
+
+Slider.propTypes = {
+  /**
+   * Initial value of the field. User action will override
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Prevents user actions on the field
+   */
+  disabled: 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,
+  /**
+   * Minimum value of the slider
+   */
+  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum value of the slider
+   */
+  max: PropTypes.oneOfType([PropTypes.string, 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,
+  /**
+   * Text describing why the field is required
+   */
+  required: PropTypes.string,
+  /**
+   * The granularity of each step on the slider
+   */
+  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Value of the field
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Slider.defaultProps = {
+  defaultValue: "",
+  id: generateId("slider"),
+  min: "0",
+  max: "100",
+  step: "1"
+};
+Slider.__docgenInfo = {
+  "description": "",
+  "displayName": "Slider",
+  "props": {
+    "defaultValue": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Initial value of the field. User action will override",
+      "defaultValue": {
+        "value": "\"\"",
+        "computed": false
+      }
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Prevents user actions on the field"
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "HTML ID attribute",
+      "defaultValue": {
+        "value": "generateId(\"slider\")",
+        "computed": true
+      }
+    },
+    "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"
+    },
+    "min": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Minimum value of the slider",
+      "defaultValue": {
+        "value": "\"0\"",
+        "computed": false
+      }
+    },
+    "max": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Maximum value of the slider",
+      "defaultValue": {
+        "value": "\"100\"",
+        "computed": false
+      }
+    },
+    "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"
+    },
+    "required": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text describing why the field is required"
+    },
+    "step": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "The granularity of each step on the slider",
+      "defaultValue": {
+        "value": "\"1\"",
+        "computed": false
+      }
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Value of the field"
+    }
+  }
+};
+
+export default Slider;

build/index.js

 'use strict';
 
-var higReact = require('hig-react');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-higReact.Range.displayName = "Slider";
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-module.exports = higReact.Range;
+var React = require('react');
+var React__default = _interopDefault(React);
+var PropTypes = _interopDefault(require('prop-types'));
+var cx = _interopDefault(require('classnames'));
+var utils = require('@hig/utils');
+
+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 = 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(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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 Input = function (_Component) {
+  _inherits(Input, _Component);
+
+  function Input() {
+    _classCallCheck(this, Input);
+
+    return _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
+  }
+
+  _createClass(Input, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          min = _props.min,
+          max = _props.max,
+          value = _props.value;
+
+
+      return React__default.createElement("input", _extends({
+        className: "hig__slider__input",
+        type: "range",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value
+      }, this.props));
+    }
+  }]);
+
+  return Input;
+}(React.Component);
+
+Input.propTypes = {
+  /**
+   * Prevents user actions on the field
+   */
+  disabled: PropTypes.bool,
+  /**
+   * HTML ID attribute
+   */
+  id: PropTypes.string,
+  /**
+   * Minimum value of the slider
+   */
+  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum value of the slider
+   */
+  max: PropTypes.oneOfType([PropTypes.string, 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,
+  /**
+   * The granularity of each step on the slider
+   */
+  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Value of the field
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Input.__docgenInfo = {
+  "description": "",
+  "displayName": "Input",
+  "props": {
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Prevents user actions on the field"
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "HTML ID attribute"
+    },
+    "min": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Minimum value of the slider"
+    },
+    "max": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Maximum value of the slider"
+    },
+    "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"
+    },
+    "step": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "The granularity of each step on the slider"
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Value of the field"
+    }
+  }
+};
+
+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 Slider = function (_Component) {
+  _inherits$1(Slider, _Component);
+
+  function Slider() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, Slider);
+
+    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 = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      value: _this.props.defaultValue
+    }, _this.handleChange = function (event) {
+      if (!_this.isControlled()) {
+        _this.updateValue(event.target.value);
+      }
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  /**
+   * @type {Object}
+   * @property {string|number} value
+   */
+
+
+  _createClass$1(Slider, [{
+    key: "getValue",
+
+
+    /**
+     * @returns {string|number}
+     */
+    value: function getValue() {
+      if (this.isControlled()) {
+        return this.props.value;
+      }
+
+      return this.state.value;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+
+  }, {
+    key: "isControlled",
+    value: function isControlled() {
+      return this.props.value !== undefined;
+    }
+
+    /**
+     * @param {string|number} value
+     */
+
+  }, {
+    key: "updateValue",
+    value: function updateValue(value) {
+      var onChange = this.props.onChange;
+
+
+      if (onChange) {
+        onChange(Number(value));
+      }
+
+      this.setState({ value: value });
+    }
+
+    /**
+     * @param {event} Event
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          id = _props.id,
+          name = _props.name,
+          label = _props.label,
+          instructions = _props.instructions,
+          required = _props.required,
+          disabled = _props.disabled,
+          min = _props.min,
+          max = _props.max,
+          step = _props.step,
+          onBlur = _props.onBlur,
+          onFocus = _props.onFocus,
+          onInput = _props.onInput;
+
+      var value = this.getValue();
+
+      return React__default.createElement(
+        "div",
+        {
+          className: cx("hig__slider", {
+            "hig__slider--disabled": disabled,
+            "hig__slider--required": required
+          })
+        },
+        React__default.createElement(
+          "div",
+          {
+            className: "hig__slider__wrapper",
+            "data-range-min": min,
+            "data-range-max": max
+          },
+          React__default.createElement(
+            "span",
+            { className: "hig__slider__current-value" },
+            value
+          ),
+          React__default.createElement(Input, {
+            id: id,
+            onChange: this.handleChange,
+            disabled: disabled,
+            name: name,
+            min: min,
+            max: max,
+            step: step,
+            value: value,
+            onBlur: onBlur,
+            onFocus: onFocus,
+            onInput: onInput
+          }),
+          label && React__default.createElement(
+            "label",
+            { htmlFor: id, className: "hig__slider__label" },
+            label
+          )
+        ),
+        instructions && React__default.createElement(
+          "p",
+          { className: "hig__slider__instructions" },
+          instructions
+        ),
+        required && React__default.createElement(
+          "p",
+          { className: "hig__slider__required-notice" },
+          required
+        )
+      );
+    }
+  }]);
+
+  return Slider;
+}(React.Component);
+
+Slider.propTypes = {
+  /**
+   * Initial value of the field. User action will override
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Prevents user actions on the field
+   */
+  disabled: 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,
+  /**
+   * Minimum value of the slider
+   */
+  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum value of the slider
+   */
+  max: PropTypes.oneOfType([PropTypes.string, 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,
+  /**
+   * Text describing why the field is required
+   */
+  required: PropTypes.string,
+  /**
+   * The granularity of each step on the slider
+   */
+  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Value of the field
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+Slider.defaultProps = {
+  defaultValue: "",
+  id: utils.generateId("slider"),
+  min: "0",
+  max: "100",
+  step: "1"
+};
+Slider.__docgenInfo = {
+  "description": "",
+  "displayName": "Slider",
+  "props": {
+    "defaultValue": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Initial value of the field. User action will override",
+      "defaultValue": {
+        "value": "\"\"",
+        "computed": false
+      }
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Prevents user actions on the field"
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "HTML ID attribute",
+      "defaultValue": {
+        "value": "generateId(\"slider\")",
+        "computed": true
+      }
+    },
+    "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"
+    },
+    "min": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Minimum value of the slider",
+      "defaultValue": {
+        "value": "\"0\"",
+        "computed": false
+      }
+    },
+    "max": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Maximum value of the slider",
+      "defaultValue": {
+        "value": "\"100\"",
+        "computed": false
+      }
+    },
+    "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"
+    },
+    "required": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text describing why the field is required"
+    },
+    "step": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "The granularity of each step on the slider",
+      "defaultValue": {
+        "value": "\"1\"",
+        "computed": false
+      }
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "Value of the field"
+    }
+  }
+};
+
+exports.default = Slider;

package.json

 {
   "name": "@hig/slider",
-  "version": "0.1.0-alpha.fc17111c",
+  "version": "0.1.0",
   "description": "HIG Slider",
   "author": "Autodesk Inc.",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Autodesk/hig.git"
+  },
   "publishConfig": {
@@ -17,19 +21,22 @@ "access": "public"
   "dependencies": {
+    "@hig/utils": "^0.1.0",
     "classnames": "^2.2.5",
-    "hig-react": "0.29.0-alpha.fc17111c",
-    "react-lifecycles-compat": "^3.0.2"
+    "prop-types": "^15.6.1"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.10",
     "react": "^15.4.1 || ^16.3.2"
   },
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.fc17111c",
-    "@hig/eslint-config": "0.2.0-alpha.fc17111c",
-    "@hig/scripts": "0.2.0-alpha.fc17111c",
-    "@hig/styles": "0.2.0-alpha.fc17111c"
+    "@hig/babel-preset": "^0.1.0",
+    "@hig/eslint-config": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
+    "@hig/styles": "^0.1.1"
   },
   "scripts": {
     "build": "hig-scripts-build",
-    "lint": "eslint src --color --ext .js,.jsx"
+    "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
+    "release": "hig-scripts-release"
   },
@@ -39,2 +46,8 @@ "eslintConfig": {
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
+  "release": {
+    "extends": "@hig/semantic-release-config"
+  },
   "babel": {
@@ -41,0 +54,0 @@ "env": {

README.md

@@ -29,6 +29,6 @@ # Slider
   required="Age is required."
-  minValue={21}
-  maxValue={99}
+  min={21}
+  max={99}
   step={1}
 />
 ```

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

decreased by-20%

Number of package files

7

increased by16.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

44739

decreased by-84.24%

Dev dependency count

6

increased by50%

Lines of code

1428

decreased by-82.54%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@hig/utils@^0.1.0

• + Addedprop-types@^15.6.1

• + Added@hig/utils@0.1.0(transitive)

• - [e-mail]17111c

• - Removedreact-lifecycles-compat@^3.0.2

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@hig/[e-mail]17111c(transitive)

• - Removed@hig/[e-mail]17111c(transitive)

• - Removed@hig/[e-mail]17111c(transitive)

• - Removed@hig/[e-mail]17111c(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removeddom-helpers@3.4.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - [e-mail]17111c(transitive)

• - [e-mail]17111c(transitive)

• - [e-mail]17111c(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.018.3.1(transitive)

• - Removedreact-dom@15.7.018.3.1(transitive)

• - Removedreact-flip-move@3.0.5(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• - Removedreact-transition-group@2.9.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)