@cmsgov/design-system-core - npm Package Compare versions

Comparing version 1.10.0 to 1.11.0

dist/components/Autocomplete/Autocomplete.js

@@ -12,2 +12,4 @@ 'use strict';
 
+require('core-js/fn/array/find');
+
 var _Button = require('../Button/Button');
@@ -14,0 +16,0 @@

dist/components/MonthPicker/MonthPicker.js

@@ -12,2 +12,4 @@ 'use strict';
 
+require('core-js/fn/array/includes');
+
 var _Button = require('../Button/Button');
@@ -37,2 +39,6 @@
 
+var _lodash = require('lodash.uniqueid');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,2 +85,4 @@
 
+    _this.hintId = (0, _lodash2.default)('monthpicker_hint_');
+    _this.labelId = (0, _lodash2.default)('monthpicker_label_');
     _this.months = getMonthNames(props.locale);
@@ -175,12 +183,13 @@ _this.monthsLong = getMonthNames(props.locale, false);
               {
-                name: name,
-                value: i + 1,
+                'aria-describedby': _this2.props.hint ? _this2.hintId : null,
+                'aria-label': _this2.monthsLong[i],
                 checked: selectedMonths.includes(i + 1),
+                className: 'ds-c-month-picker__month',
+                disabled: disabledMonths.includes(i + 1),
+                inversed: inversed,
                 onChange: function onChange(e) {
                   return _this2.handleChange(e);
                 },
-                className: 'ds-c-month-picker__month',
-                disabled: disabledMonths.includes(i + 1),
-                inversed: inversed,
-                'aria-label': _this2.monthsLong[i]
+                name: name,
+                value: i + 1
               },
@@ -199,2 +208,3 @@ month
         {
+          'aria-describedby': this.labelId,
           size: 'small',
@@ -216,6 +226,6 @@ className: 'ds-u-margin-right--1',
         {
+          className: 'ds-u-visibility--screen-reader',
           labelClassName: classes,
           component: 'legend',
           errorMessage: this.props.errorMessage,
-          hint: this.props.hint,
           requirementLabel: this.props.requirementLabel,
@@ -236,10 +246,30 @@ inversed: this.props.inversed
 
+      var Heading = this.props.headingLevel ? 'h' + this.props.headingLevel : 'h4';
       var classes = (0, _classnames2.default)('ds-c-month-picker', 'ds-c-fieldset', 'ds-u-margin-y--3', this.props.className);
       return _react2.default.createElement(
-        'fieldset',
+        'div',
         { className: classes },
-        this.renderLabel(),
         _react2.default.createElement(
           'div',
-          { className: 'ds-u-margin-y--3' },
+          null,
+          _react2.default.createElement(
+            Heading,
+            {
+              className: 'ds-c-label ds-u-font-weight--bold ds-u-margin--0',
+              id: this.labelId
+            },
+            this.props.label
+          ),
+          this.props.hint ? _react2.default.createElement(
+            'p',
+            {
+              className: 'ds-c-label ds-c-field__hint ds-u-margin--0',
+              id: this.hintId
+            },
+            this.props.hint
+          ) : null
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'ds-u-margin-top--3' },
           this.renderButton(selectAllText, function () {
@@ -253,5 +283,10 @@ return _this3.handleSelectAll();
         _react2.default.createElement(
-          'div',
-          { className: 'ds-c-month-picker__months' },
-          this.renderMonths()
+          'fieldset',
+          { className: 'ds-c-fieldset' },
+          this.renderLabel(),
+          _react2.default.createElement(
+            'div',
+            { className: 'ds-c-month-picker__months' },
+            this.renderMonths()
+          )
         )
@@ -307,2 +342,6 @@ );
   /**
+   * Heading type to override default `<h4>` in title block
+   */
+  headingLevel: _propTypes2.default.number,
+  /**
    * Text showing the requirement ("Required", "Optional", etc.). See [Required and Optional Fields]({{root}}/guidelines/forms/#required-and-optional-fields).
@@ -309,0 +348,0 @@ */

package.json

 {
   "name": "@cmsgov/design-system-core",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "publishConfig": {
@@ -12,3 +12,3 @@ "access": "public"
   "dependencies": {
-    "@cmsgov/design-system-support": "^1.10.0",
+    "@cmsgov/design-system-support": "^1.11.0",
     "classnames": "^2.2.5",
@@ -15,0 +15,0 @@ "core-js": "^2.5.1",

src/components/Autocomplete/Autocomplete.jsx

@@ -0,1 +1,2 @@
+import 'core-js/fn/array/find';
 import Button from '../Button/Button';
@@ -2,0 +3,0 @@ import Downshift from 'downshift';

src/components/MonthPicker/MonthPicker.jsx

@@ -0,1 +1,2 @@
+import 'core-js/fn/array/includes';
 import Button from '../Button/Button';
@@ -7,2 +8,3 @@ import Choice from '../ChoiceList/Choice';
 import classNames from 'classnames';
+import uniqueId from 'lodash.uniqueid';
 
@@ -36,2 +38,4 @@ /*
     super(props);
+    this.hintId = uniqueId('monthpicker_hint_');
+    this.labelId = uniqueId('monthpicker_label_');
     this.months = getMonthNames(props.locale);
@@ -114,10 +118,11 @@ this.monthsLong = getMonthNames(props.locale, false);
             <Choice
-              name={name}
-              value={i + 1}
+              aria-describedby={this.props.hint ? this.hintId : null}
+              aria-label={this.monthsLong[i]}
               checked={selectedMonths.includes(i + 1)}
-              onChange={e => this.handleChange(e)}
               className="ds-c-month-picker__month"
               disabled={disabledMonths.includes(i + 1)}
               inversed={inversed}
-              aria-label={this.monthsLong[i]}
+              onChange={e => this.handleChange(e)}
+              name={name}
+              value={i + 1}
             >
@@ -135,2 +140,3 @@ {month}
       <Button
+        aria-describedby={this.labelId}
         size="small"
@@ -154,6 +160,6 @@ className="ds-u-margin-right--1"
       <FormLabel
+        className="ds-u-visibility--screen-reader"
         labelClassName={classes}
         component="legend"
         errorMessage={this.props.errorMessage}
-        hint={this.props.hint}
         requirementLabel={this.props.requirementLabel}
@@ -169,2 +175,5 @@ inversed={this.props.inversed}
     const { selectAllText, clearAllText } = this.props;
+    const Heading = this.props.headingLevel
+      ? `h${this.props.headingLevel}`
+      : `h4`;
     const classes = classNames(
@@ -177,10 +186,28 @@ 'ds-c-month-picker',
     return (
-      <fieldset className={classes}>
-        {this.renderLabel()}
-        <div className="ds-u-margin-y--3">
+      <div className={classes}>
+        <div>
+          <Heading
+            className="ds-c-label ds-u-font-weight--bold ds-u-margin--0"
+            id={this.labelId}
+          >
+            {this.props.label}
+          </Heading>
+          {this.props.hint ? (
+            <p
+              className="ds-c-label ds-c-field__hint ds-u-margin--0"
+              id={this.hintId}
+            >
+              {this.props.hint}
+            </p>
+          ) : null}
+        </div>
+        <div className="ds-u-margin-top--3">
           {this.renderButton(selectAllText, () => this.handleSelectAll())}
           {this.renderButton(clearAllText, () => this.handleClearAll())}
         </div>
-        <div className="ds-c-month-picker__months">{this.renderMonths()}</div>
-      </fieldset>
+        <fieldset className="ds-c-fieldset">
+          {this.renderLabel()}
+          <div className="ds-c-month-picker__months">{this.renderMonths()}</div>
+        </fieldset>
+      </div>
     );
@@ -232,2 +259,6 @@ }
   /**
+   * Heading type to override default `<h4>` in title block
+   */
+  headingLevel: PropTypes.number,
+  /**
    * Text showing the requirement ("Required", "Optional", etc.). See [Required and Optional Fields]({{root}}/guidelines/forms/#required-and-optional-fields).
@@ -234,0 +265,0 @@ */

src/components/MonthPicker/MonthPicker.test.jsx

@@ -47,7 +47,31 @@ import MonthPicker from './MonthPicker.jsx';
 
+  it('renders a title block with hint', () => {
+    const { wrapper } = renderMonthPicker({
+      label: 'Select a month',
+      hint: 'Tips and tricks'
+    });
+    const title = wrapper.find('h4.ds-c-label');
+    const hint = wrapper.find('p.ds-c-field__hint');
+    expect(title.exists()).toEqual(true);
+    expect(title.text()).toEqual('Select a month');
+    expect(hint.exists()).toEqual(true);
+    expect(hint.text()).toEqual('Tips and tricks');
+  });
+
+  it('renders a title block without hint', () => {
+    const { wrapper } = renderMonthPicker({
+      label: 'Select a preference',
+      headingLevel: 3
+    });
+    const title = wrapper.find('h3.ds-c-label');
+    const hint = wrapper.find('p.ds-c-field__hint');
+    expect(title.exists()).toEqual(true);
+    expect(title.text()).toEqual('Select a preference');
+    expect(hint.exists()).toEqual(false);
+  });
+
   it('renders a FormLabel with correct props', () => {
     const { wrapper, props } = renderMonthPicker({
       labelClassName: 'ds-u-color--primary',
-      errorMessage: 'Error!',
-      hint: 'Tips and tricks'
+      errorMessage: 'Error!'
     });
@@ -57,4 +81,3 @@ const label = wrapper.find('FormLabel');
       labelClassName: 'ds-u-font-weight--bold ds-u-color--primary',
-      errorMessage: props.errorMessage,
-      hint: props.hint
+      errorMessage: props.errorMessage
     });
@@ -61,0 +84,0 @@ });

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

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

Improved metrics

Total package byte prevSize

1474492

increased by0.23%

Lines of code

9516

increased by0.95%

Dependency changes

• Updated@cmsgov/design-system-support@^1.11.0