Release v2.1.0

CMSgov · Jul 3, 2019 · e8f67f6 · e8f67f6
1 parent 0acf756
commit e8f67f6
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 76 deletions.
diff --git a/lerna.json b/lerna.json
@@ -14,5 +14,5 @@
     "packages/*",
     "packages/themes/*"
   ],
-  "version": "2.0.2"
+  "version": "2.1.0"
 }
diff --git a/packages/core/dist/components/Autocomplete/Autocomplete.js b/packages/core/dist/components/Autocomplete/Autocomplete.js
@@ -31,6 +31,10 @@ var _TextField = require('../TextField/TextField');
 
 var _TextField2 = _interopRequireDefault(_TextField);
 
+var _WrapperDiv = require('./WrapperDiv');
+
+var _WrapperDiv2 = _interopRequireDefault(_WrapperDiv);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -186,34 +190,21 @@ var Autocomplete = exports.Autocomplete = function (_React$PureComponent) {
           clearSearchButton = _props.clearSearchButton,
           autocompleteProps = _objectWithoutProperties(_props, ['ariaClearLabel', 'clearInputText', 'items', 'label', 'loading', 'children', 'className', 'clearSearchButton']);
 
-      // See https://github.com/downshift-js/downshift#getrootprops
-      // Custom container returns a plain div, without the ARIA markup
-      // required for a WAI-ARIA 1.1 combobox. See the comments at the
-      // top of the component file for an explanation of this decision.
-
-
-      var MyDiv = function MyDiv(_ref) {
-        var innerRef = _ref.innerRef,
-            rest = _objectWithoutProperties(_ref, ['innerRef']);
-
-        return _react2.default.createElement('div', _extends({ ref: innerRef }, rest));
-      };
-
       var rootClassName = (0, _classnames2.default)('ds-u-clearfix', 'ds-c-autocomplete', className);
 
       return _react2.default.createElement(
         _downshift2.default,
         autocompleteProps,
-        function (_ref2) {
-          var clearSelection = _ref2.clearSelection,
-              getInputProps = _ref2.getInputProps,
-              getItemProps = _ref2.getItemProps,
-              getRootProps = _ref2.getRootProps,
-              highlightedIndex = _ref2.highlightedIndex,
-              inputValue = _ref2.inputValue,
-              isOpen = _ref2.isOpen;
+        function (_ref) {
+          var clearSelection = _ref.clearSelection,
+              getInputProps = _ref.getInputProps,
+              getItemProps = _ref.getItemProps,
+              getRootProps = _ref.getRootProps,
+              highlightedIndex = _ref.highlightedIndex,
+              inputValue = _ref.inputValue,
+              isOpen = _ref.isOpen;
           return _react2.default.createElement(
-            MyDiv,
+            _WrapperDiv2.default,
             getRootProps({
               'aria-expanded': null,
               'aria-haspopup': null,
@@ -270,7 +261,7 @@ var Autocomplete = exports.Autocomplete = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 Autocomplete.defaultProps = {
-  ariaClearLabel: 'Clear typeahead and search again',
+  ariaClearLabel: 'Clear search to try again',
   autoCompleteLabel: 'off',
   clearInputText: 'Clear search',
   clearSearchButton: true,

diff --git a/packages/core/dist/components/Autocomplete/WrapperDiv.js b/packages/core/dist/components/Autocomplete/WrapperDiv.js
@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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 _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; } /* eslint-disable */
+
+
+// See https://github.com/downshift-js/downshift#getrootprops
+// Custom container returns a plain div, without the ARIA markup
+// required for a WAI-ARIA 1.1 combobox. See the comments at the
+// top of the component file for an explanation of this decision.
+var WrapperDiv = function WrapperDiv(_ref) {
+  var innerRef = _ref.innerRef,
+      rest = _objectWithoutProperties(_ref, ['innerRef']);
+
+  return _react2.default.createElement('div', _extends({ ref: innerRef }, rest));
+};
+
+exports.default = WrapperDiv;
diff --git a/packages/core/dist/components/Button/Button.js b/packages/core/dist/components/Button/Button.js
@@ -69,7 +69,8 @@ var Button = exports.Button = function (_React$PureComponent) {
           onClick = _props.onClick,
           size = _props.size,
           variation = _props.variation,
-          props = _objectWithoutProperties(_props, ['className', 'component', 'inverse', 'onClick', 'size', 'variation']);
+          buttonRef = _props.buttonRef,
+          props = _objectWithoutProperties(_props, ['className', 'component', 'inverse', 'onClick', 'size', 'variation', 'buttonRef']);
 
       var attrs = _extends({
         className: this.classNames()
@@ -123,7 +124,7 @@ var Button = exports.Button = function (_React$PureComponent) {
 
       return _react2.default.createElement(
         ComponentType,
-        attrs,
+        _extends({ ref: this.props.buttonRef }, attrs),
         this.props.children
       );
     }
@@ -158,6 +159,10 @@ Button.propTypes = {
    * Not called when the button is disabled.
    */
   onClick: _propTypes2.default.func,
+  /**
+   * Access a reference to the `button` or `a` element
+   */
+  buttonRef: _propTypes2.default.func,
   size: _propTypes2.default.oneOf(['small', 'big']),
   /**
    * Button [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) attribute

diff --git a/packages/core/dist/components/FormLabel/FormLabel.css b/packages/core/dist/components/FormLabel/FormLabel.css
diff --git a/packages/core/dist/components/FormLabel/FormLabel.js b/packages/core/dist/components/FormLabel/FormLabel.js
@@ -44,10 +44,14 @@ var FormLabel = exports.FormLabel = function (_React$PureComponent) {
     key: 'errorMessage',
     value: function errorMessage() {
       if (this.props.errorMessage) {
+        var classes = (0, _classnames2.default)('ds-c-field__hint', 'ds-u-color--error', {
+          'ds-u-color--error-light': this.props.inversed
+        });
+
         return _react2.default.createElement(
           'span',
           {
-            className: 'ds-c-field__hint ds-u-color--error',
+            className: classes,
             id: this.props.fieldId + '-message',
             role: 'alert'
           },
@@ -99,7 +103,9 @@ var FormLabel = exports.FormLabel = function (_React$PureComponent) {
 
       var ComponentType = this.props.component;
       var labelTextClasses = (0, _classnames2.default)(this.props.labelClassName);
-      var classes = (0, _classnames2.default)('ds-c-label', this.props.className);
+      var classes = (0, _classnames2.default)('ds-c-label', this.props.className, {
+        'ds-c-label--inverse': this.props.inversed
+      });
 
       return _react2.default.createElement(
         ComponentType,

diff --git a/packages/core/dist/components/TextField/Mask.js b/packages/core/dist/components/TextField/Mask.js
@@ -8,7 +8,7 @@ exports.Mask = undefined;
 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; }; }();
 
 exports.maskValue = maskValue;
-exports.unmask = unmask;
+exports.unmaskValue = unmaskValue;
 
 require('core-js/fn/array/includes');
 
@@ -51,7 +51,6 @@ var deliminatedMaskRegex = {
  */
 function deliminateRegexGroups(value, rx) {
   var matches = toDigitsAndAsterisks(value).match(rx);
-
   if (matches && matches.length > 1) {
     value = matches.slice(1).filter(function (a) {
       return !!a;
@@ -110,9 +109,6 @@ function toDigits(value) {
  * @returns {Number}
  */
 function toNumber(value) {
-  if (typeof value !== 'string') return value;
-  if (!value.match(/\d/)) return undefined;
-
   var sign = value.charAt(0) === '-' ? -1 : 1;
   var parts = value.split('.');
   // This assumes if the user adds a "." it should be a float. If we want it to
@@ -129,27 +125,42 @@ function toNumber(value) {
 }
 
 /**
- * Returns the value with additional masking characters
+ * Determines if a value is a valid string with numeric digits
+ * @param {String} value
+ * @param {String} mask
+ * @returns {Boolean}
+ */
+function isValueMaskable(value, mask) {
+  if (value && typeof value === 'string') {
+    var hasDigits = value.match(/\d/);
+    var hasDigitsAsterisks = value.match(/[\d*]/g);
+    if (hasDigits || hasDigitsAsterisks && mask === 'ssn') {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Returns the value with additional masking characters, or the same value back if invalid numeric string
  * @param {String} value
  * @returns {String}
  */
 function maskValue() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var mask = arguments[1];
 
-  if (value && typeof value === 'string') {
-    value = value.trim();
-
+  if (isValueMaskable(value, mask)) {
     if (mask === 'currency') {
       // Format number with commas. If the number includes a decimal,
       // ensure it includes two decimal points
       var number = toNumber(value);
-      if (number === undefined) {
-        value = '';
-      } else {
+      if (number !== undefined) {
         value = stringWithFixedDigits(number.toLocaleString('en-US'));
       }
-    } else if (Object.keys(deliminatedMaskRegex).includes(mask)) {
+    } else if (deliminatedMaskRegex[mask]) {
+      // Use deliminator regex to mask value and remove unwanted characters
+      // If the regex does not match, return the numeric digits.
       value = deliminateRegexGroups(value, deliminatedMaskRegex[mask]);
     }
   }
@@ -215,7 +226,7 @@ var Mask = exports.Mask = function (_React$PureComponent) {
         // component has made its own unrelated change, so we should update our
         // state and mask this new value.
 
-        if (unmask(fieldProps.value, mask) !== unmask(this.state.value, mask)) {
+        if (unmaskValue(fieldProps.value, mask) !== unmaskValue(this.state.value, mask)) {
           var value = maskValue(fieldProps.value || '', mask);
           this.setState({ value: value }); // eslint-disable-line react/no-did-update-set-state
         }
@@ -316,29 +327,23 @@ Mask.propTypes = {
 };
 
 /**
- * Remove mask characters from value
+ * Remove mask characters from value, or the same value back if invalid numeric string
  * @param {String} value
  * @param {String} mask
  * @returns {String}
  */
-function unmask(value, mask) {
-  if (!value || typeof value !== 'string') return value;
-  var rawValue = value;
-  value = value.trim();
-
-  if (mask === 'currency') {
-    // Preserve only digits, decimal point, or negative symbol
-    var matches = value.match(/^-|[\d.]/g);
-    if (matches) {
-      value = matches.join('');
-    } else {
-      value = '';
+function unmaskValue(value, mask) {
+  if (isValueMaskable(value, mask)) {
+    if (mask === 'currency') {
+      // Preserve only digits, decimal point, or negative symbol
+      var matches = value.match(/^-|[\d.]/g);
+      if (matches) {
+        value = matches.join('');
+      }
+    } else if (deliminatedMaskRegex[mask]) {
+      // Remove the deliminators and revert to single ungrouped string
+      value = toDigitsAndAsterisks(value);
     }
-  } else if (Object.keys(deliminatedMaskRegex).includes(mask)) {
-    // Remove the deliminators and revert to single ungrouped string
-    value = toDigitsAndAsterisks(value);
-  } else {
-    return rawValue;
   }
 
   return value;

diff --git a/packages/core/dist/components/TextField/TextField.js b/packages/core/dist/components/TextField/TextField.js
@@ -11,12 +11,19 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _Mask = require('./Mask');
 
-var _Mask2 = _interopRequireDefault(_Mask);
+Object.defineProperty(exports, 'unmaskValue', {
+  enumerable: true,
+  get: function get() {
+    return _Mask.unmaskValue;
+  }
+});
 
 var _FormLabel = require('../FormLabel/FormLabel');
 
 var _FormLabel2 = _interopRequireDefault(_FormLabel);
 
+var _Mask2 = _interopRequireDefault(_Mask);
+
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -43,13 +50,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 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; }
 
-exports.unmaskValue = _Mask.unmask;
-
 /**
  * A `TextField` component renders an input field as well as supporting UI
  * elements like a label, error message, and hint text.
  */
-
 var TextField = exports.TextField = function (_React$PureComponent) {
   _inherits(TextField, _React$PureComponent);
 

diff --git a/packages/core/dist/index.css b/packages/core/dist/index.css
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cmsgov/design-system-core",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "dist/index.js",
   "dependencies": {
-    "@cmsgov/design-system-support": "^2.0.2",
+    "@cmsgov/design-system-support": "^2.1.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.3",
     "downshift": "^3.2.10",

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@cmsgov/design-system-docs",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "private": true,
   "description": "Design system's documentation website",
   "repository": "CMSgov/design-system",
   "dependencies": {
-    "@cmsgov/design-system-core": "^2.0.2",
-    "@cmsgov/design-system-layout": "^2.0.2",
-    "@cmsgov/design-system-support": "^2.0.2",
+    "@cmsgov/design-system-core": "^2.1.0",
+    "@cmsgov/design-system-layout": "^2.1.0",
+    "@cmsgov/design-system-support": "^2.1.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.3",
     "lodash": "^4.17.5",