terra-content-container - npm Package Compare versions

Comparing version 3.38.0 to 3.39.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## 3.39.0 - (June 28, 2023)
+
+* Added
+   * Added `setFocusOnContainer` prop to provide scroll capability for keyboard only users. (Requires Jest Snapshot updates)
+   * Added `borderColor` prop for allowing consumers to change the border color to dark or white depending upon the color of the content container 
+
 ## 3.38.0 - (February 15, 2023)
@@ -7,0 +13,0 @@

lib/ContentContainer.js

@@ -11,4 +11,5 @@ "use strict";
 var _terraScroll = _interopRequireDefault(require("terra-scroll"));
+var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
 var _ContentContainerModule = _interopRequireDefault(require("./ContentContainer.module.scss"));
-var _excluded = ["header", "footer", "children", "fill", "scrollRefCallback"];
+var _excluded = ["header", "footer", "children", "fill", "scrollRefCallback", "setFocusOnContainer", "backgroundColor"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,3 +40,14 @@ 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); }
    */
-  scrollRefCallback: _propTypes.default.func
+  scrollRefCallback: _propTypes.default.func,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Sets focus on content when set to `true`. Focus on content helps in scrolling  within container when there is no interactive element to focus within container.
+   */
+  setFocusOnContainer: _propTypes.default.bool,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * This prop needs to be set only if `setFocusOnContainer` is set. Based on dark or light background color the border will be white or black respectively to maintain
+   * an accessible color contrast ratio.
+   */
+  backgroundColor: _propTypes.default.oneOf(['dark', 'light'])
 };
@@ -47,3 +59,5 @@ var defaultProps = {
   fill: false,
-  scrollRefCallback: undefined
+  scrollRefCallback: undefined,
+  setFocusOnContainer: false,
+  backgroundColor: undefined
 };
@@ -56,15 +70,27 @@ var ContentContainer = function ContentContainer(_ref) {
     scrollRefCallback = _ref.scrollRefCallback,
+    setFocusOnContainer = _ref.setFocusOnContainer,
+    backgroundColor = _ref.backgroundColor,
     customProps = _objectWithoutProperties(_ref, _excluded);
+  var theme = _react.default.useContext(_terraThemeContext.default);
   var contentLayoutClassNames = cx(["content-container-".concat(fill ? 'fill' : 'static'), customProps.className]);
+  var background = backgroundColor || 'light';
+  var scrollClassNames = cx('normalizer', theme.className, {
+    'content-container-focused-padding': setFocusOnContainer
+  }, background);
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, customProps, {
     className: contentLayoutClassNames
   }), header && /*#__PURE__*/_react.default.createElement("div", {
-    className: cx('header')
+    className: cx('header', {
+      'content-container-focused-padding': setFocusOnContainer
+    })
   }, header), /*#__PURE__*/_react.default.createElement("div", {
     className: cx('main')
   }, /*#__PURE__*/_react.default.createElement(_terraScroll.default, {
-    className: cx('normalizer'),
-    refCallback: scrollRefCallback
+    className: scrollClassNames,
+    refCallback: scrollRefCallback,
+    tabIndex: setFocusOnContainer ? '0' : '-1'
   }, children)), footer && /*#__PURE__*/_react.default.createElement("div", {
-    className: cx('footer')
+    className: cx('footer', {
+      'content-container-focused-padding': setFocusOnContainer
+    })
   }, footer));
@@ -71,0 +97,0 @@ };

package.json

 {
   "name": "terra-content-container",
   "main": "lib/ContentContainer.js",
-  "version": "3.38.0",
+  "version": "3.39.0",
   "description": "The Terra ContentContainer is a structural component for the purpose of arranging content with a header.",
@@ -31,3 +31,4 @@ "repository": {
     "prop-types": "^15.5.8",
-    "terra-scroll": "^2.34.0"
+    "terra-scroll": "^2.35.0",
+    "terra-theme-context": "^1.0.0"
   },
@@ -47,3 +48,3 @@ "scripts": {
   },
-  "gitHead": "632d9cecc4c480d250ddef2ee6999349eda97641"
+  "gitHead": "12c5a230bf239557ce9df5827155138d3a415b5a"
 }

src/ContentContainer.jsx

@@ -5,2 +5,3 @@ import React from 'react';
 import Scroll from 'terra-scroll';
+import ThemeContext from 'terra-theme-context';
 import styles from './ContentContainer.module.scss';
@@ -31,2 +32,13 @@
   scrollRefCallback: PropTypes.func,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * Sets focus on content when set to `true`. Focus on content helps in scrolling  within container when there is no interactive element to focus within container.
+   */
+  setFocusOnContainer: PropTypes.bool,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * This prop needs to be set only if `setFocusOnContainer` is set. Based on dark or light background color the border will be white or black respectively to maintain
+   * an accessible color contrast ratio.
+   */
+  backgroundColor: PropTypes.oneOf(['dark', 'light']),
 };
@@ -40,2 +52,4 @@
   scrollRefCallback: undefined,
+  setFocusOnContainer: false,
+  backgroundColor: undefined,
 };
@@ -49,4 +63,8 @@
   scrollRefCallback,
+  setFocusOnContainer,
+  backgroundColor,
   ...customProps
 }) => {
+  const theme = React.useContext(ThemeContext);
+
   const contentLayoutClassNames = cx([
@@ -57,11 +75,19 @@ `content-container-${fill ? 'fill' : 'static'}`,
 
+  const background = backgroundColor || 'light';
+  const scrollClassNames = cx(
+    'normalizer',
+    theme.className,
+    { 'content-container-focused-padding': setFocusOnContainer },
+    background,
+  );
+
   return (
     <div {...customProps} className={contentLayoutClassNames}>
-      {header && <div className={cx('header')}>{header}</div>}
+      {header && <div className={cx('header', { 'content-container-focused-padding': setFocusOnContainer })}>{header}</div>}
       <div className={cx('main')}>
-        <Scroll className={cx('normalizer')} refCallback={scrollRefCallback}>
+        <Scroll className={scrollClassNames} refCallback={scrollRefCallback} tabIndex={setFocusOnContainer ? '0' : '-1'}>
           {children}
         </Scroll>
       </div>
-      {footer && <div className={cx('footer')}>{footer}</div>}
+      {footer && <div className={cx('footer', { 'content-container-focused-padding': setFocusOnContainer })}>{footer}</div>}
     </div>
@@ -68,0 +94,0 @@ );

tests/wdio/content-container-spec.js

@@ -13,2 +13,15 @@ Terra.describeViewports('Content Container', ['medium'], () => {
   });
+
+  it('displays Content Container with scroll', () => {
+    browser.url('/raw/tests/cerner-terra-core-docs/content-container/scrollable-content-container');
+    Terra.validates.element('before scroll');
+    browser.keys(['Tab', 'ArrowDown', 'ArrowDown']);
+    Terra.validates.element('after scroll');
+  });
+
+  it('displays Content Container with dark color', () => {
+    browser.url('/raw/tests/cerner-terra-core-docs/content-container/content-container-dark');
+    browser.keys(['Tab']);
+    Terra.validates.element('dark content container');
+  });
 });

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

37905

increased by15.06%

Number of package files

15

increased by36.36%

Lines of code

247

increased by32.8%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedterra-theme-context@^1.0.0

• + Addedterra-theme-context@1.11.0(transitive)

• Updatedterra-scroll@^2.35.0