Release v[1.30.0]

lerna.json

@@ -14,5 +14,5 @@
     "packages/*",
     "packages/themes/*"
   ],
-  "version": "1.29.1"
+  "version": "1.30.0"
 }

packages/core/dist/components/HelpDrawer/HelpDrawer.js

@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HelpDrawer = 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; }; }();
+
+var _Button = require('../Button/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 HelpDrawer = exports.HelpDrawer = function (_React$PureComponent) {
+  _inherits(HelpDrawer, _React$PureComponent);
+
+  function HelpDrawer(props) {
+    _classCallCheck(this, HelpDrawer);
+
+    var _this = _possibleConstructorReturn(this, (HelpDrawer.__proto__ || Object.getPrototypeOf(HelpDrawer)).call(this, props));
+
+    _this.titleRef = null;
+    return _this;
+  }
+
+  _createClass(HelpDrawer, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.titleRef) this.titleRef.focus();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          ariaLabel = _props.ariaLabel,
+          title = _props.title,
+          children = _props.children,
+          onCloseClick = _props.onCloseClick,
+          footerBody = _props.footerBody,
+          footerTitle = _props.footerTitle;
+      /* eslint-disable jsx-a11y/no-noninteractive-tabindex, react/no-danger */
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'ds-c-help-drawer' },
+        _react2.default.createElement(
+          'div',
+          { className: 'ds-c-help-drawer__header' },
+          _react2.default.createElement(
+            'div',
+            { className: 'ds-u-fill--gray-lightest ds-u-padding--2 ds-u-display--flex ds-u-align-items--start' },
+            _react2.default.createElement(
+              'h3',
+              {
+                ref: function ref(el) {
+                  return _this2.titleRef = el;
+                },
+                tabIndex: '0',
+                className: 'ds-u-text--lead ds-u-margin-y--0 ds-u-margin-right--2'
+              },
+              title
+            ),
+            _react2.default.createElement(
+              _Button2.default,
+              {
+                'aria-label': ariaLabel,
+                className: 'ds-u-margin-left--auto',
+                size: 'small',
+                onClick: onCloseClick,
+                variation: 'secondary'
+              },
+              'Close'
+            )
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'ds-c-help-drawer__body ds-u-md-font-size--small ds-u-lg-font-size--base ds-u-padding--2' },
+          children
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'ds-c-help-drawer__footer ds-u-fill--primary-alt-lightest ds-u-md-font-size--small ds-u-lg-font-size--base ds-u-padding--2' },
+          _react2.default.createElement(
+            'h4',
+            { className: 'ds-text ds-u-margin--0' },
+            footerTitle
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'ds-text ds-u-margin--0' },
+            footerBody
+          )
+        )
+      );
+    }
+  }]);
+
+  return HelpDrawer;
+}(_react2.default.PureComponent);
+
+HelpDrawer.defaultProps = { ariaLabel: 'Close help drawer' };
+HelpDrawer.propTypes = {
+  /** Helps give more context to screen readers on the button that closes the Help Drawer */
+  ariaLabel: _propTypes2.default.string,
+  children: _propTypes2.default.node.isRequired,
+  footerBody: _propTypes2.default.node,
+  footerTitle: _propTypes2.default.string,
+  onCloseClick: _propTypes2.default.func.isRequired,
+  /** Required because the title is what gets focused on mount */
+  title: _propTypes2.default.string.isRequired
+};
+
+exports.default = HelpDrawer;

packages/core/dist/components/HelpDrawer/HelpDrawerToggle.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HelpDrawerToggle = 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; }; }();
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+/**
+ * A link that triggers the visibility of a help drawer
+ */
+var HelpDrawerToggle = exports.HelpDrawerToggle = function (_React$PureComponent) {
+  _inherits(HelpDrawerToggle, _React$PureComponent);
+
+  function HelpDrawerToggle() {
+    _classCallCheck(this, HelpDrawerToggle);
+
+    return _possibleConstructorReturn(this, (HelpDrawerToggle.__proto__ || Object.getPrototypeOf(HelpDrawerToggle)).apply(this, arguments));
+  }
+
+  _createClass(HelpDrawerToggle, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      if (!this.props.helpDrawerOpen && this.buttonRef) {
+        this.buttonRef.focus();
+      }
+      var blockInlineClass = 'ds-u-display--' + (this.props.inline ? 'inline-block' : 'block');
+      /* eslint-disable jsx-a11y/anchor-is-valid */
+      return (
+        // Use a <span> since a <div> may be invalid depending where this link is nested
+        _react2.default.createElement(
+          'span',
+          { className: blockInlineClass },
+          _react2.default.createElement(
+            'a',
+            {
+              href: 'javascript:void(0);',
+              className: this.props.className,
+              ref: function ref(el) {
+                return _this2.buttonRef = el;
+              },
+              onClick: function onClick() {
+                return _this2.props.showDrawer();
+              }
+            },
+            this.props.children
+          )
+        )
+      );
+    }
+  }]);
+
+  return HelpDrawerToggle;
+}(_react2.default.PureComponent);
+
+/* eslint-disable react/no-unused-prop-types */
+
+
+HelpDrawerToggle.propTypes = {
+  /** Whether or not the Help Drawer controlled by this toggle is open or closed. This value is used to re-focus the toggle that opened the drawer when the drawer closes. */
+  helpDrawerOpen: _propTypes2.default.bool.isRequired,
+  children: _propTypes2.default.node.isRequired,
+  /** Additional classes for the toggle button anchor element */
+  className: _propTypes2.default.string,
+  /** Add display inline or block to parent span */
+  inline: _propTypes2.default.bool,
+  /** This function is called with an id that the toggle generates. It can
+   be used in implementing the help drawer for keeping track of the drawer the toggle controls */
+  showDrawer: _propTypes2.default.func.isRequired
+};
+
+exports.default = HelpDrawerToggle;

packages/core/dist/components/index.js

@@ -124,6 +124,18 @@ Object.keys(_FormLabel).forEach(function (key) {
   });
 });
 
+var _HelpDrawer = require('./HelpDrawer/HelpDrawer');
+
+Object.keys(_HelpDrawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HelpDrawer[key];
+    }
+  });
+});
+
 var _MonthPicker = require('./MonthPicker/MonthPicker');
 
 Object.keys(_MonthPicker).forEach(function (key) {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmsgov/design-system-core",
-  "version": "1.29.1",
+  "version": "1.30.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "dist/index.js",
   "dependencies": {
-    "@cmsgov/design-system-support": "^1.29.1",
+    "@cmsgov/design-system-support": "^1.30.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.3",
     "downshift": "1.31.16",

packages/docs/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@cmsgov/design-system-docs",
-  "version": "1.29.1",
+  "version": "1.30.0",
   "private": true,
   "description": "Design system's documentation website",
   "repository": "CMSgov/design-system",
   "dependencies": {
-    "@cmsgov/design-system-core": "^1.29.1",
-    "@cmsgov/design-system-layout": "^1.29.1",
-    "@cmsgov/design-system-support": "^1.29.1",
+    "@cmsgov/design-system-core": "^1.30.0",
+    "@cmsgov/design-system-layout": "^1.30.0",
+    "@cmsgov/design-system-support": "^1.30.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.3",
     "lodash": "^4.17.5",