terra-section-header - npm Package Compare versions

Comparing version 2.56.0 to 2.57.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## 2.57.0 - (December 7, 2022)
+
+* Changed
+  * Renamed title prop to text to avoid conflict with native html attribute
+
+* Added
+  * Added button role, aria-label and aria-expanded attribute to `Arrange` component wrapper
+
 ## 2.56.0 - (July 14, 2022)
@@ -7,0 +15,0 @@

lib/SectionHeader.js

 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,61 +8,33 @@ value: true
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _bind = _interopRequireDefault(require("classnames/bind"));
-
 var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
-
 var KeyCode = _interopRequireWildcard(require("keycode-js"));
-
 var _terraArrange = _interopRequireDefault(require("terra-arrange"));
-
 var _SectionHeaderModule = _interopRequireDefault(require("./SectionHeader.module.scss"));
-
-var _excluded = ["title", "onClick", "isOpen", "isTransparent", "level"];
-
+var _excluded = ["text", "onClick", "isOpen", "isTransparent", "level"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
-
+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, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 var cx = _bind.default.bind(_SectionHeaderModule.default);
-
 var propTypes = {
@@ -73,4 +44,3 @@ /**
    */
-  title: _propTypes.default.string.isRequired,
-
+  text: _propTypes.default.string.isRequired,
   /**
@@ -80,3 +50,2 @@ * Callback function triggered when the accordion icon is clicked.
   onClick: _propTypes.default.func,
-
   /**
@@ -86,3 +55,2 @@ * Whether the accordion icon should be displayed in its 'open' or 'closed' position.
   isOpen: _propTypes.default.bool,
-
   /**
@@ -92,3 +60,2 @@ * Optionally sets the heading level. One of `1`, `2`, `3`, `4`, `5`, `6`. Default `level=2`.
   level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6]),
-
   /**
@@ -105,17 +72,11 @@ * Sets the background of the section header to transparent.
 };
-
 var isRecognizedKeyPress = function isRecognizedKeyPress(event) {
   return event.nativeEvent.keyCode === KeyCode.KEY_RETURN || event.nativeEvent.keyCode === KeyCode.KEY_SPACE;
 };
-
 var SectionHeader = /*#__PURE__*/function (_React$Component) {
   _inherits(SectionHeader, _React$Component);
-
   var _super = _createSuper(SectionHeader);
-
   function SectionHeader(props) {
     var _this;
-
     _classCallCheck(this, SectionHeader);
-
     _this = _super.call(this, props);
@@ -129,3 +90,2 @@ _this.state = {
   }
-
   _createClass(SectionHeader, [{
@@ -135,3 +95,2 @@ key: "wrapOnKeyDown",
       var _this2 = this;
-
       return function (event) {
@@ -141,5 +100,5 @@ if (isRecognizedKeyPress(event) && !_this2.state.isActive) {
             isActive: true
-          }); // Call the same function the user provides for a click event
+          });
 
-
+          // Call the same function the user provides for a click event
           if (_this2.props.onClick) {
@@ -149,3 +108,2 @@ _this2.props.onClick(event);
         }
-
         if (onKeyDown) {
@@ -160,3 +118,2 @@ onKeyDown(event);
       var _this3 = this;
-
       return function (event) {
@@ -168,3 +125,2 @@ if (isRecognizedKeyPress(event) && _this3.state.isActive) {
         }
-
         if (onKeyUp) {
@@ -179,11 +135,14 @@ onKeyUp(event);
       var _this$props = this.props,
-          title = _this$props.title,
-          onClick = _this$props.onClick,
-          isOpen = _this$props.isOpen,
-          isTransparent = _this$props.isTransparent,
-          level = _this$props.level,
-          customProps = _objectWithoutProperties(_this$props, _excluded);
-
+        text = _this$props.text,
+        onClick = _this$props.onClick,
+        isOpen = _this$props.isOpen,
+        isTransparent = _this$props.isTransparent,
+        level = _this$props.level,
+        customProps = _objectWithoutProperties(_this$props, _excluded);
       var theme = this.context;
-
+      var headerText = text;
+      if (text === undefined && customProps.title !== undefined) {
+        headerText = customProps.title;
+        customProps.title = undefined;
+      }
       if (process.env.NODE_ENV !== 'production' && !onClick && isOpen) {
@@ -193,16 +152,10 @@ // eslint-disable-next-line no-console
       }
-
       var attributes = _objectSpread({}, customProps);
-
       if (onClick) {
-        attributes.tabIndex = '0';
         attributes.onKeyDown = this.wrapOnKeyDown(attributes.onKeyDown);
         attributes.onKeyUp = this.wrapOnKeyUp(attributes.onKeyUp);
-        attributes.role = 'button';
       }
-
       var iconClassNames = cx(['accordion-icon', {
         'is-open': onClick && isOpen
       }]);
-
       var accordionIcon = /*#__PURE__*/_react.default.createElement("div", {
@@ -213,3 +166,2 @@ className: cx('accordion-icon-wrapper')
       }));
-
       var sectionHeaderClassNames = (0, _classnames.default)(cx('section-header', {
@@ -222,27 +174,32 @@ 'is-interactable': onClick
       }, theme.className), customProps.className);
-      var Element = "h".concat(level); // allows us to set an onClick on the div
+      var Element = "h".concat(level);
+
+      // allows us to set an onClick on the div
       // We set key events and role conditionally set if onClick is set
       // eslint doesn't know about this and so it marks this as a lint error
-
       /* eslint-disable jsx-a11y/click-events-have-key-events */
-
       /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-      return /*#__PURE__*/_react.default.createElement("div", _extends({}, attributes, {
+      return /*#__PURE__*/_react.default.createElement(Element, _extends({}, attributes, {
         onClick: onClick,
-        className: sectionHeaderClassNames
-      }), /*#__PURE__*/_react.default.createElement(_terraArrange.default, {
+        className: sectionHeaderClassNames,
+        tabIndex: "0"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        "aria-expanded": isOpen,
+        tabIndex: "-1",
+        "aria-label": headerText,
+        className: cx('arrange-wrapper')
+      }, /*#__PURE__*/_react.default.createElement(_terraArrange.default, {
         fitStart: onClick && accordionIcon,
-        fill: /*#__PURE__*/_react.default.createElement(Element, {
+        fill: /*#__PURE__*/_react.default.createElement("span", {
+          "aria-hidden": onClick !== undefined,
           className: cx('title')
-        }, title),
+        }, headerText),
         className: cx('title-arrange')
-      }));
+      })));
       /* eslint-enable jsx-a11y/no-static-element-interactions */
     }
   }]);
-
   return SectionHeader;
 }(_react.default.Component);
-
 SectionHeader.propTypes = propTypes;
@@ -249,0 +206,0 @@ SectionHeader.defaultProps = defaultProps;

package.json

 {
   "name": "terra-section-header",
   "main": "lib/SectionHeader.js",
-  "version": "2.56.0",
+  "version": "2.57.0",
   "description": "Section Header component that contains text and can be optionally interacted with.",
@@ -32,3 +32,3 @@ "repository": {
     "prop-types": "^15.5.8",
-    "terra-arrange": "^3.49.0",
+    "terra-arrange": "^3.50.0",
     "terra-mixins": "^1.40.0",
@@ -50,3 +50,3 @@ "terra-theme-context": "^1.0.0"
   },
-  "gitHead": "a7c88211833e8f180dec97341ef28bbdc590355e"
+  "gitHead": "421b2643a58e6de628aa789a9cdd0778b0a942a2"
 }

README.md

@@ -10,3 +10,3 @@ # Terra Section Header
 - [Getting Started](#getting-started)
-- [Documentation](https://engineering.cerner.com/terra-ui/components/terra-section-header/section-header/section-header)
+- [Documentation](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/section-header/about)
 - [LICENSE](#license)
@@ -13,0 +13,0 @@

src/SectionHeader.jsx

@@ -16,3 +16,3 @@ import React from 'react';
    */
-  title: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
   /**
@@ -85,3 +85,3 @@ * Callback function triggered when the accordion icon is clicked.
     const {
-      title,
+      text,
       onClick,
@@ -96,2 +96,8 @@ isOpen,
 
+    let headerText = text;
+    if (text === undefined && customProps.title !== undefined) {
+      headerText = customProps.title;
+      customProps.title = undefined;
+    }
+
     if ((process.env.NODE_ENV !== 'production') && (!onClick && isOpen)) {
@@ -105,6 +111,4 @@ // eslint-disable-next-line no-console
     if (onClick) {
-      attributes.tabIndex = '0';
       attributes.onKeyDown = this.wrapOnKeyDown(attributes.onKeyDown);
       attributes.onKeyUp = this.wrapOnKeyUp(attributes.onKeyUp);
-      attributes.role = 'button';
     }
@@ -142,9 +146,11 @@
     return (
-      <div {...attributes} onClick={onClick} className={sectionHeaderClassNames}>
-        <Arrange
-          fitStart={onClick && accordionIcon}
-          fill={<Element className={cx('title')}>{title}</Element>}
-          className={cx('title-arrange')}
-        />
-      </div>
+      <Element {...attributes} onClick={onClick} className={sectionHeaderClassNames} tabIndex="0">
+        <div role="button" aria-expanded={isOpen} tabIndex="-1" aria-label={headerText} className={cx('arrange-wrapper')}>
+          <Arrange
+            fitStart={onClick && accordionIcon}
+            fill={<span aria-hidden={(onClick !== undefined)} className={cx('title')}>{headerText}</span>}
+            className={cx('title-arrange')}
+          />
+        </div>
+      </Element>
     );
@@ -151,0 +157,0 @@ /* eslint-enable jsx-a11y/no-static-element-interactions */

tests/jest/SectionHeader.test.jsx

@@ -7,3 +7,3 @@ import React from 'react';
 describe('SectionHeader', () => {
-  const defaultRender = <SectionHeader title="foo" />;
+  const defaultRender = <SectionHeader text="foo" />;
 
@@ -17,3 +17,3 @@ // Snapshot Tests
   it("should render without an accordion icon when no 'onClick()' is passed", () => {
-    const sectionHeader = <SectionHeader title="foo" />;
+    const sectionHeader = <SectionHeader text="foo" />;
     const wrapper = render(sectionHeader);
@@ -24,3 +24,3 @@ expect(wrapper).toMatchSnapshot();
   it("should render with an accordion icon when an 'onClick()' callback is passed", () => {
-    const sectionHeader = <SectionHeader title="foo" onClick={() => {}} />;
+    const sectionHeader = <SectionHeader text="foo" onClick={() => {}} />;
     const wrapper = render(sectionHeader);
@@ -31,3 +31,3 @@ expect(wrapper).toMatchSnapshot();
   it("should render with an accordion icon in the open position when an 'onClick()' callback and 'isOpen' is passed", () => {
-    const sectionHeader = <SectionHeader title="foo" onClick={() => {}} isOpen />;
+    const sectionHeader = <SectionHeader text="foo" onClick={() => {}} isOpen />;
     const wrapper = render(sectionHeader);
@@ -40,3 +40,3 @@ expect(wrapper).toMatchSnapshot();
       <ThemeContextProvider theme={{ className: 'orion-fusion-theme' }}>
-        <SectionHeader title="foo" />
+        <SectionHeader text="foo" />
       </ThemeContextProvider>,
@@ -43,0 +43,0 @@ );

New alerts

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

Improved metrics

Total package byte prevSize

78513

increased by2.15%

Lines of code

444

increased by4.96%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedterra-arrange@^3.50.0