@hig/radio-button - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

build/index.es.js

@@ -0,7 +1,224 @@
+import { cx, css } from 'emotion';
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { ThemeContext } from '@hig/theme-context';
-import { css } from 'emotion';
-import PropTypes from 'prop-types';
 import { ControlBehavior } from '@hig/behaviors';
 
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+/** `Object#toString` result references. */
+var funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]';
+
+/**
+ * Used to match `RegExp`
+ * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+ */
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+/** Used to detect host constructors (Safari). */
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = (typeof commonjsGlobal === 'undefined' ? 'undefined' : _typeof(commonjsGlobal)) == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = (typeof self === 'undefined' ? 'undefined' : _typeof(self)) == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/**
+ * Gets the value at `key` of `object`.
+ *
+ * @private
+ * @param {Object} [object] The object to query.
+ * @param {string} key The key of the property to get.
+ * @returns {*} Returns the property value.
+ */
+function getValue(object, key) {
+  return object == null ? undefined : object[key];
+}
+
+/**
+ * Checks if `value` is a host object in IE < 9.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
+ */
+function isHostObject(value) {
+  // Many host objects are `Object` objects that can coerce to strings
+  // despite having improperly defined `toString` methods.
+  var result = false;
+  if (value != null && typeof value.toString != 'function') {
+    try {
+      result = !!(value + '');
+    } catch (e) {}
+  }
+  return result;
+}
+
+/** Used for built-in method references. */
+var funcProto = Function.prototype,
+    objectProto = Object.prototype;
+
+/** Used to detect overreaching core-js shims. */
+var coreJsData = root['__core-js_shared__'];
+
+/** Used to detect methods masquerading as native. */
+var maskSrcKey = function () {
+  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+  return uid ? 'Symbol(src)_1.' + uid : '';
+}();
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString = funcProto.toString;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/** Used to detect if a method is native. */
+var reIsNative = RegExp('^' + funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&').replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
+
+/* Built-in method references that are verified to be native. */
+var Map = getNative(root, 'Map'),
+    nativeCreate = getNative(Object, 'create');
+
+/**
+ * The base implementation of `_.isNative` without bad shim checks.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a native function,
+ *  else `false`.
+ */
+function baseIsNative(value) {
+  if (!isObject(value) || isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction(value) || isHostObject(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource(value));
+}
+
+/**
+ * Gets the native function at `key` of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {string} key The key of the method to get.
+ * @returns {*} Returns the function if it's native, else `undefined`.
+ */
+function getNative(object, key) {
+  var value = getValue(object, key);
+  return baseIsNative(value) ? value : undefined;
+}
+
+/**
+ * Checks if `func` has its source masked.
+ *
+ * @private
+ * @param {Function} func The function to check.
+ * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+ */
+function isMasked(func) {
+  return !!maskSrcKey && maskSrcKey in func;
+}
+
+/**
+ * Converts `func` to its source code.
+ *
+ * @private
+ * @param {Function} func The function to process.
+ * @returns {string} Returns the source code.
+ */
+function toSource(func) {
+  if (func != null) {
+    try {
+      return funcToString.call(func);
+    } catch (e) {}
+    try {
+      return func + '';
+    } catch (e) {}
+  }
+  return '';
+}
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 8-9 which returns 'object' for typed array and other constructors.
+  var tag = isObject(value) ? objectToString.call(value) : '';
+  return tag == funcTag || tag == genTag;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Returns a css className that combines what the user passes down and a string.
+ * Ideally the string would map to the element's js style object's name.
+ * @param {string} className
+ * @param {string} appendedString
+ * @returns {string} A string that looks like className__appendedString
+ */
+
+function createCustomClassNames(className, appendedString) {
+  return className && className.split(" ").reduce(function (acc, cur) {
+    return cx(acc, cur.trim() + "__" + appendedString);
+  }, "");
+}
+
 function stylesheet(props, themeData) {
@@ -11,3 +228,4 @@ var isPressed = props.isPressed,
       hasHover = props.hasHover,
-      disabled = props.disabled;
+      disabled = props.disabled,
+      customStylesheet = props.stylesheet;
 
@@ -77,7 +295,11 @@ var opacity = disabled ? themeData["colorScheme.opacity.disabled"] : "1.0";
 
-  return styles;
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
+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 _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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -103,2 +325,10 @@
 
+      var _props = this.props,
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["stylesheet"]);
+
+      var className = otherProps.className;
+
+      var radioButtonWrapperClassName = createCustomClassNames(className, "radio-button-wrapper");
+
       return React.createElement(
@@ -111,4 +341,8 @@ ThemeContext.Consumer,
 
-          var styles = stylesheet(_this2.props, resolvedRoles, metadata.colorSchemeId);
-          return React.createElement("span", { className: css(styles.radioButtonWrapper) });
+          var styles = stylesheet(_extends({
+            stylesheet: customStylesheet
+          }, _this2.props), resolvedRoles, metadata.colorSchemeId);
+          return React.createElement("span", {
+            className: cx(css(styles.radioButtonWrapper), radioButtonWrapperClassName)
+          });
         }
@@ -121,12 +355,28 @@ );
 }(Component);
+
+ButtonPresenter.propTypes = {
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
+};
 ButtonPresenter.__docgenInfo = {
   "description": "",
-  "displayName": "ButtonPresenter"
+  "displayName": "ButtonPresenter",
+  "props": {
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
+    }
+  }
 };
 
-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 _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 _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 _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; }
+function _objectWithoutProperties$1(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; }
 
@@ -158,3 +408,4 @@ function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
           isPressed = _props.isPressed,
-          otherProps = _objectWithoutProperties(_props, ["disabled", "hasFocus", "hasHover", "isPressed"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties$1(_props, ["disabled", "hasFocus", "hasHover", "isPressed", "stylesheet"]);
 
@@ -167,18 +418,29 @@ return React.createElement(
 
-          var styles = stylesheet(_extends({ isPressed: isPressed, hasFocus: hasFocus, hasHover: hasHover, disabled: disabled }, _this2.props), resolvedRoles);
+          var styles = stylesheet(_extends$1({
+            isPressed: isPressed,
+            hasFocus: hasFocus,
+            hasHover: hasHover,
+            disabled: disabled,
+            stylesheet: customStylesheet
+          }, _this2.props), resolvedRoles);
 
+          var className = otherProps.className;
+
+          var radioButtonInputClassName = createCustomClassNames(className, "radio-button-input");
+
           return React.createElement(
             "div",
-            { className: css(styles.radioButtonContainer) },
-            React.createElement("input", _extends({
+            { className: cx(css(styles.radioButtonContainer), className) },
+            React.createElement("input", _extends$1({}, otherProps, {
               disabled: disabled,
               type: "radio",
-              className: css(styles.radioButtonInput)
-            }, otherProps)),
-            React.createElement(ButtonPresenter, {
+              className: cx(css(styles.radioButtonInput), radioButtonInputClassName)
+            })),
+            React.createElement(ButtonPresenter, _extends$1({}, otherProps, {
               hasFocus: hasFocus,
               hasHover: hasHover,
               isPressed: isPressed,
-              disabled: disabled
-            })
+              disabled: disabled,
+              stylesheet: customStylesheet
+            }))
           );
@@ -221,3 +483,7 @@ }
    */
-  isPressed: PropTypes.bool
+  isPressed: PropTypes.bool,
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -276,2 +542,9 @@ RadioButtonPresenter.__docgenInfo = {
       "description": "Returns whether or not the button is currently pressed"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -281,5 +554,5 @@ }
 
-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 _extends$2 = 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 _objectWithoutProperties$1(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; }
+function _objectWithoutProperties$2(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; }
 
@@ -293,3 +566,3 @@ function RadioButton(props) {
       onMouseUp = props.onMouseUp,
-      otherProps = _objectWithoutProperties$1(props, ["onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp"]);
+      otherProps = _objectWithoutProperties$2(props, ["onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp"]);
 
@@ -316,3 +589,3 @@ return React.createElement(
           handleMouseUp = _ref.onMouseUp;
-      return React.createElement(RadioButtonPresenter, _extends$1({
+      return React.createElement(RadioButtonPresenter, _extends$2({
         hasFocus: hasFocus,
@@ -319,0 +592,0 @@ hasHover: hasHover,

build/index.js

@@ -7,9 +7,226 @@ 'use strict';
 
+var emotion = require('emotion');
 var React = require('react');
 var React__default = _interopDefault(React);
+var PropTypes = _interopDefault(require('prop-types'));
 var themeContext = require('@hig/theme-context');
-var emotion = require('emotion');
-var PropTypes = _interopDefault(require('prop-types'));
 var behaviors = require('@hig/behaviors');
 
+var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+/** `Object#toString` result references. */
+var funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]';
+
+/**
+ * Used to match `RegExp`
+ * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+ */
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+/** Used to detect host constructors (Safari). */
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = (typeof commonjsGlobal === 'undefined' ? 'undefined' : _typeof(commonjsGlobal)) == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = (typeof self === 'undefined' ? 'undefined' : _typeof(self)) == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/**
+ * Gets the value at `key` of `object`.
+ *
+ * @private
+ * @param {Object} [object] The object to query.
+ * @param {string} key The key of the property to get.
+ * @returns {*} Returns the property value.
+ */
+function getValue(object, key) {
+  return object == null ? undefined : object[key];
+}
+
+/**
+ * Checks if `value` is a host object in IE < 9.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
+ */
+function isHostObject(value) {
+  // Many host objects are `Object` objects that can coerce to strings
+  // despite having improperly defined `toString` methods.
+  var result = false;
+  if (value != null && typeof value.toString != 'function') {
+    try {
+      result = !!(value + '');
+    } catch (e) {}
+  }
+  return result;
+}
+
+/** Used for built-in method references. */
+var funcProto = Function.prototype,
+    objectProto = Object.prototype;
+
+/** Used to detect overreaching core-js shims. */
+var coreJsData = root['__core-js_shared__'];
+
+/** Used to detect methods masquerading as native. */
+var maskSrcKey = function () {
+  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+  return uid ? 'Symbol(src)_1.' + uid : '';
+}();
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString = funcProto.toString;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/** Used to detect if a method is native. */
+var reIsNative = RegExp('^' + funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&').replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
+
+/* Built-in method references that are verified to be native. */
+var Map = getNative(root, 'Map'),
+    nativeCreate = getNative(Object, 'create');
+
+/**
+ * The base implementation of `_.isNative` without bad shim checks.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a native function,
+ *  else `false`.
+ */
+function baseIsNative(value) {
+  if (!isObject(value) || isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction(value) || isHostObject(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource(value));
+}
+
+/**
+ * Gets the native function at `key` of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {string} key The key of the method to get.
+ * @returns {*} Returns the function if it's native, else `undefined`.
+ */
+function getNative(object, key) {
+  var value = getValue(object, key);
+  return baseIsNative(value) ? value : undefined;
+}
+
+/**
+ * Checks if `func` has its source masked.
+ *
+ * @private
+ * @param {Function} func The function to check.
+ * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+ */
+function isMasked(func) {
+  return !!maskSrcKey && maskSrcKey in func;
+}
+
+/**
+ * Converts `func` to its source code.
+ *
+ * @private
+ * @param {Function} func The function to process.
+ * @returns {string} Returns the source code.
+ */
+function toSource(func) {
+  if (func != null) {
+    try {
+      return funcToString.call(func);
+    } catch (e) {}
+    try {
+      return func + '';
+    } catch (e) {}
+  }
+  return '';
+}
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 8-9 which returns 'object' for typed array and other constructors.
+  var tag = isObject(value) ? objectToString.call(value) : '';
+  return tag == funcTag || tag == genTag;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Returns a css className that combines what the user passes down and a string.
+ * Ideally the string would map to the element's js style object's name.
+ * @param {string} className
+ * @param {string} appendedString
+ * @returns {string} A string that looks like className__appendedString
+ */
+
+function createCustomClassNames(className, appendedString) {
+  return className && className.split(" ").reduce(function (acc, cur) {
+    return emotion.cx(acc, cur.trim() + "__" + appendedString);
+  }, "");
+}
+
 function stylesheet(props, themeData) {
@@ -19,3 +236,4 @@ var isPressed = props.isPressed,
       hasHover = props.hasHover,
-      disabled = props.disabled;
+      disabled = props.disabled,
+      customStylesheet = props.stylesheet;
 
@@ -85,7 +303,11 @@ var opacity = disabled ? themeData["colorScheme.opacity.disabled"] : "1.0";
 
-  return styles;
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
+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 _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; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -111,2 +333,10 @@
 
+      var _props = this.props,
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["stylesheet"]);
+
+      var className = otherProps.className;
+
+      var radioButtonWrapperClassName = createCustomClassNames(className, "radio-button-wrapper");
+
       return React__default.createElement(
@@ -119,4 +349,8 @@ themeContext.ThemeContext.Consumer,
 
-          var styles = stylesheet(_this2.props, resolvedRoles, metadata.colorSchemeId);
-          return React__default.createElement("span", { className: emotion.css(styles.radioButtonWrapper) });
+          var styles = stylesheet(_extends({
+            stylesheet: customStylesheet
+          }, _this2.props), resolvedRoles, metadata.colorSchemeId);
+          return React__default.createElement("span", {
+            className: emotion.cx(emotion.css(styles.radioButtonWrapper), radioButtonWrapperClassName)
+          });
         }
@@ -129,12 +363,28 @@ );
 }(React.Component);
+
+ButtonPresenter.propTypes = {
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
+};
 ButtonPresenter.__docgenInfo = {
   "description": "",
-  "displayName": "ButtonPresenter"
+  "displayName": "ButtonPresenter",
+  "props": {
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
+    }
+  }
 };
 
-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 _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 _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 _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; }
+function _objectWithoutProperties$1(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; }
 
@@ -166,3 +416,4 @@ function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
           isPressed = _props.isPressed,
-          otherProps = _objectWithoutProperties(_props, ["disabled", "hasFocus", "hasHover", "isPressed"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties$1(_props, ["disabled", "hasFocus", "hasHover", "isPressed", "stylesheet"]);
 
@@ -175,18 +426,29 @@ return React__default.createElement(
 
-          var styles = stylesheet(_extends({ isPressed: isPressed, hasFocus: hasFocus, hasHover: hasHover, disabled: disabled }, _this2.props), resolvedRoles);
+          var styles = stylesheet(_extends$1({
+            isPressed: isPressed,
+            hasFocus: hasFocus,
+            hasHover: hasHover,
+            disabled: disabled,
+            stylesheet: customStylesheet
+          }, _this2.props), resolvedRoles);
 
+          var className = otherProps.className;
+
+          var radioButtonInputClassName = createCustomClassNames(className, "radio-button-input");
+
           return React__default.createElement(
             "div",
-            { className: emotion.css(styles.radioButtonContainer) },
-            React__default.createElement("input", _extends({
+            { className: emotion.cx(emotion.css(styles.radioButtonContainer), className) },
+            React__default.createElement("input", _extends$1({}, otherProps, {
               disabled: disabled,
               type: "radio",
-              className: emotion.css(styles.radioButtonInput)
-            }, otherProps)),
-            React__default.createElement(ButtonPresenter, {
+              className: emotion.cx(emotion.css(styles.radioButtonInput), radioButtonInputClassName)
+            })),
+            React__default.createElement(ButtonPresenter, _extends$1({}, otherProps, {
               hasFocus: hasFocus,
               hasHover: hasHover,
               isPressed: isPressed,
-              disabled: disabled
-            })
+              disabled: disabled,
+              stylesheet: customStylesheet
+            }))
           );
@@ -229,3 +491,7 @@ }
    */
-  isPressed: PropTypes.bool
+  isPressed: PropTypes.bool,
+  /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -284,2 +550,9 @@ RadioButtonPresenter.__docgenInfo = {
       "description": "Returns whether or not the button is currently pressed"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
     }
@@ -289,5 +562,5 @@ }
 
-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 _extends$2 = 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 _objectWithoutProperties$1(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; }
+function _objectWithoutProperties$2(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; }
 
@@ -301,3 +574,3 @@ function RadioButton(props) {
       onMouseUp = props.onMouseUp,
-      otherProps = _objectWithoutProperties$1(props, ["onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp"]);
+      otherProps = _objectWithoutProperties$2(props, ["onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp"]);
 
@@ -324,3 +597,3 @@ return React__default.createElement(
           handleMouseUp = _ref.onMouseUp;
-      return React__default.createElement(RadioButtonPresenter, _extends$1({
+      return React__default.createElement(RadioButtonPresenter, _extends$2({
         hasFocus: hasFocus,
@@ -327,0 +600,0 @@ hasHover: hasHover,

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/radio-button-v1.1.0](https://github.com/Autodesk/hig/compare/@hig/radio-button@1.0.9...@hig/radio-button@1.1.0) (2020-12-07)
+
+
+### Features
+
+* add stylesheet and className props ([3ce7888](https://github.com/Autodesk/hig/commit/3ce7888))
+
 # [@hig/radio-button-v1.0.9](https://github.com/Autodesk/hig/compare/@hig/radio-button@1.0.8...@hig/radio-button@1.0.9) (2020-05-12)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/radio-button",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "HIG Radio Button",
@@ -26,4 +26,4 @@ "author": "Autodesk Inc.",
   "peerDependencies": {
-    "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.16.0",
+    "@hig/theme-context": "^3.0.1",
+    "@hig/theme-data": "^2.19.0",
     "react": "^15.4.1 || ^16.3.2"
@@ -30,0 +30,0 @@ },

README.md

@@ -26,1 +26,26 @@ # Radio Button
 ```
+
+## Styling
+
+Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 
+
+RadioButton also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance
+
+```jsx
+import RadioButton from '@hig/radio-button';
+
+function YourComponent() {
+  // ...
+  const customStylesheet = (styles, props, themeData) => ({
+    ...styles,
+    radioButtonWrapper: {
+      ...styles.radioButtonWrapper,
+      color: themeData["colorScheme.errorColor"]
+    }
+  });
+
+  return (
+    <RadioButton stylesheet={customStylesheet} />
+  );
+}
+```

New alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50030

increased by56.86%

Lines of code

1058

increased by82.41%

Number of lines in readme file

50

increased by92.31%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes