[terra-content-container] Adding backgroundColor prop in content-cont…

…ainer (#3817)

* Adding bordercolor prop in contnet-container

* Fix for WDIO Test.

* Adding changelog

* Updating changes

* Missed changes

* Missed changes 2

* Review changes

* Review changes 2

* Review comments

* Padding issues

* New approach

* Code cleanup

* Removing wdio test

* Cleanup

* doc change

* Update clinical-lowlight-theme wdio snapshot

* Update wdio for default

* Update orion-fusion-theme wdio snapshot

* Revert "Update orion-fusion-theme wdio snapshot"

This reverts commit a89112c.

* Wdio snapshot for orion-fusion

* WDIO snapshot update for fusion-theme

* Review updates

* Lint fix

---------

Co-authored-by: st06365 <[email protected]>
Co-authored-by: swetasingh9714 <[email protected]>

packages/terra-content-container/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * 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)
 

packages/terra-content-container/package.json

@@ -28,7 +28,8 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
-    "terra-scroll": "^2.34.0"
+    "terra-scroll": "^2.34.0",
+    "terra-theme-context": "^1.0.0"
   },
   "scripts": {
     "compile": "babel --root-mode upward src --out-dir lib --copy-files",

packages/terra-content-container/src/ContentContainer.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import Scroll from 'terra-scroll';
+import ThemeContext from 'terra-theme-context';
 import styles from './ContentContainer.module.scss';
 
 const cx = classNames.bind(styles);
@@ -32,6 +33,12 @@ const propTypes = {
    * 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']),
 };
 
 const defaultProps = {
@@ -41,6 +48,7 @@ const defaultProps = {
   fill: false,
   scrollRefCallback: undefined,
   setFocusOnContainer: false,
+  backgroundColor: undefined,
 };
 
 const ContentContainer = ({
@@ -50,23 +58,33 @@ const ContentContainer = ({
   fill,
   scrollRefCallback,
   setFocusOnContainer,
+  backgroundColor,
   ...customProps
 }) => {
+  const theme = React.useContext(ThemeContext);
+
   const contentLayoutClassNames = cx([
     `content-container-${fill ? 'fill' : 'static'}`,
     customProps.className,
   ]);
 
+  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', { focusoncontainer: setFocusOnContainer })}>{header}</div>}
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-      <div className={cx('main')} role="region">
-        <Scroll className={cx('normalizer', { focusoncontainer: setFocusOnContainer })} refCallback={scrollRefCallback} tabIndex={setFocusOnContainer ? '0' : '-1'}>
+      {header && <div className={cx('header', { 'content-container-focused-padding': setFocusOnContainer })}>{header}</div>}
+      <div className={cx('main')}>
+        <Scroll className={scrollClassNames} refCallback={scrollRefCallback} tabIndex={setFocusOnContainer ? '0' : '-1'}>
           {children}
         </Scroll>
       </div>
-      {footer && <div className={cx('footer', { focusoncontainer: setFocusOnContainer })}>{footer}</div>}
+      {footer && <div className={cx('footer', { 'content-container-focused-padding': setFocusOnContainer })}>{footer}</div>}
     </div>
   );
 };

packages/terra-content-container/src/ContentContainer.module.scss

@@ -1,3 +1,6 @@
+@import './orion-fusion-theme/ContentContainer.module';
+@import './clinical-lowlight-theme/ContentContainer.module';
+
 /* stylelint-disable selector-max-compound-selectors */
 :local {
   .content-container-static {
@@ -39,9 +42,20 @@
     }
   }
 
-  .focusoncontainer {
+  .content-container-focused-padding {
     padding-left: 0.7142857143rem;
     padding-right: 0.7142857143rem;
   }
+
+  .dark:focus {
+    outline: 2px dashed var(--terra-content-container-dark-focus-outline, #c8cacb);
+    outline-offset: -2px;
+  }
+
+  .light:focus {
+    outline: 2px dashed var(--terra-content-container-light-focus-outline, #000);
+    outline-offset: -2px;
+  }
+
 }
 /* stylelint-enable */

packages/terra-content-container/src/clinical-lowlight-theme/ContentContainer.module.scss

@@ -0,0 +1,5 @@
+:local {
+  .clinical-lowlight-theme {
+    --terra-content-container-light-focus-outline: #c8cacb;
+  }
+}

packages/terra-content-container/src/orion-fusion-theme/ContentContainer.module.scss

@@ -0,0 +1,6 @@
+:local {
+  .orion-fusion-theme {
+    --terra-content-container-light-focus-outline: #000;
+    --terra-content-container-dark-focus-outline: #c8cacb;
+  }
+}

packages/terra-content-container/tests/jest/__snapshots__/ContentContainer.test.jsx.snap

@@ -6,10 +6,9 @@ exports[`should render a default component 1`] = `
 >
   <div
     className="main"
-    role="region"
   >
     <Scroll
-      className="normalizer"
+      className="normalizer light"
       tabIndex="-1"
     />
   </div>
@@ -22,10 +21,9 @@ exports[`should render a footer 1`] = `
 >
   <div
     className="main"
-    role="region"
   >
     <Scroll
-      className="normalizer"
+      className="normalizer light"
       tabIndex="-1"
     />
   </div>
@@ -52,10 +50,9 @@ exports[`should render a header 1`] = `
   </div>
   <div
     className="main"
-    role="region"
   >
     <Scroll
-      className="normalizer"
+      className="normalizer light"
       tabIndex="-1"
     />
   </div>
@@ -68,10 +65,9 @@ exports[`should render as fill 1`] = `
 >
   <div
     className="main"
-    role="region"
   >
     <Scroll
-      className="normalizer"
+      className="normalizer light"
       tabIndex="-1"
     />
   </div>
@@ -84,10 +80,9 @@ exports[`should render content 1`] = `
 >
   <div
     className="main"
-    role="region"
   >
     <Scroll
-      className="normalizer"
+      className="normalizer light"
       tabIndex="-1"
     >
       <p>
@@ -111,10 +106,9 @@ exports[`should render header & footer 1`] = `
   </div>
   <div
     className="main"
-    role="region"
   >
     <Scroll
-      className="normalizer"
+      className="normalizer light"
       tabIndex="-1"
     />
   </div>

packages/terra-content-container/tests/wdio/content-container-spec.js

@@ -17,4 +17,10 @@ Terra.describeViewports('Content Container', ['medium'], () => {
     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');
+  });
 });

packages/terra-core-docs/CHANGELOG.md

@@ -13,7 +13,7 @@
 * Added
   * Added terra-scroll A11y tests.
   * Added an example in terra-content-container without interactive elements.
-
+  * Added examples for terra-content-container with dark colors.
 * Changed
   * Updated `terra-status-view - Change Variant` example component to use the `terra-form-select` component instead of HTML native `<select>`.
   * Updated example for `terra-visually-hidden-text` for better demonstration of correct usage.

packages/terra-core-docs/package.json

@@ -87,6 +87,7 @@
     "terra-table": "^4.34.0",
     "terra-tag": "^2.57.0",
     "terra-text": "^4.51.0",
+    "terra-theme-context": "^1.0.0",
     "terra-toggle": "^3.55.0",
     "terra-toggle-button": "^3.68.0",
     "terra-toggle-section-header": "^2.65.0",

packages/terra-core-docs/src/terra-dev-site/doc/content-container/About.1.doc.mdx

@@ -5,6 +5,7 @@ import ContentContainerStandard from './example/ContentContainerStandard?dev-sit
 import ContentContainerFill from './example/ContentContainerFill?dev-site-example';
 import ContentContainerScrollRef from './example/ContentContainerScrollRef?dev-site-example';
 import ContentContainerWithoutInteractiveElements from './example/ContentContainerWithoutInteractiveElements?dev-site-example';
+import ContentContainerWithoutInteractiveElementsDark from './example/ContentContainerWithoutInteractiveElementsDark?dev-site-example';
 
 import ContentContainerPropsTable from 'terra-content-container/src/ContentContainer?dev-site-props-table';
 
@@ -54,6 +55,7 @@ It is not recommended to use content container footer with heading elements, ins
 ## Examples
 <ContentContainerStandard title="Standard Container" />
 <ContentContainerWithoutInteractiveElements title="Standard Container without Interactive elements"/>
+<ContentContainerWithoutInteractiveElementsDark title="Standard Container without Interactive elements(Different parent background)"/>
 <ContentContainerFill title="Fill Container" />
 <ContentContainerScrollRef title="Scroll Ref Container" />
 

packages/terra-core-docs/src/terra-dev-site/doc/content-container/example/ContentContainerDocCommon.module.scss

@@ -8,6 +8,20 @@
     height: 200px;
   }
 
+  .content-container-dark {
+    background-color: #024978;
+    border: 1px solid #fff;
+  }
+
+  .content-container-darker {
+    background-color: #1b2326;
+    border: 1px solid #fff;
+  }
+
+  .white-text {
+    color: #fff;
+  }
+
   .button {
     margin: 5px;
   }

packages/terra-core-docs/src/terra-dev-site/doc/content-container/example/ContentContainerWithoutInteractiveElements.jsx

@@ -12,18 +12,18 @@ const display1 = (
     verification of personal information, updating medical history, and making necessary changes to insurance or contact details. Hospitals may
     request patients to review and confirm their information during subsequent visits or at designated intervals. Accurate and comprehensive patient
     details play a vital role in providing effective healthcare. They serve as a foundation for medical assessments, treatment planning, and continuity
-    of care, enabling healthcare providers to deliver personalized and efficient services to patients.Begin filling out the form by entering your personal
+    of care, enabling healthcare providers to deliver personalised and efficient services to patients.Begin filling out the form by entering your personal
     information. This usually includes your full name, contact details (such as phone number and email address), and residential address. It is crucial to
     provide accurate contact information as it will be used for communication and verification purposes.
   </p>
 );
 
-const contentheader = <h3>Registration Form</h3>;
-const contentfooter = <p>Please enter the name as per the official document</p>;
+const contentHeader = <h3>Registration Form</h3>;
+const contentFooter = <p>Please enter the name as per the official document</p>;
 
 const Container = () => (
   <div className={cx('content-container-fill')}>
-    <ContentContainer header={contentheader} footer={contentfooter} fill setFocusOnContainer>
+    <ContentContainer header={contentHeader} footer={contentFooter} fill setFocusOnContainer>
       <div key="1">{display1}</div>
     </ContentContainer>
   </div>

packages/terra-core-docs/src/terra-dev-site/doc/content-container/example/ContentContainerWithoutInteractiveElementsDark.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ContentContainer from 'terra-content-container';
+import classNames from 'classnames/bind';
+import ThemeContext from 'terra-theme-context';
+import styles from './ContentContainerDocCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const display1 = (
+  <p className={cx('white-text')} key="1">
+    Entering patient details is a crucial process in healthcare facilities that involves capturing and documenting relevant information about
+    individuals seeking medical care. Patient details need to be regularly updated to ensure accuracy and relevancy. This may involve periodic
+    verification of personal information, updating medical history, and making necessary changes to insurance or contact details. Hospitals may
+    request patients to review and confirm their information during subsequent visits or at designated intervals. Accurate and comprehensive patient
+    details play a vital role in providing effective healthcare. They serve as a foundation for medical assessments, treatment planning, and continuity
+    of care, enabling healthcare providers to deliver personalised and efficient services to patients.Begin filling out the form by entering your personal
+    information. This usually includes your full name, contact details (such as phone number and email address), and residential address. It is crucial to
+    provide accurate contact information as it will be used for communication and verification purposes.
+  </p>
+);
+
+const contentHeader = <h3 className={cx('white-text')}>Registration Form</h3>;
+const contentFooter = <p className={cx('white-text')}>Please enter the name as per the official document</p>;
+
+const Container = () => {
+  const theme = React.useContext(ThemeContext);
+  return (
+    <div className={cx(theme.className === 'clinical-lowlight-theme' ? 'content-container-darker' : 'content-container-dark')}>
+      <ContentContainer header={contentHeader} footer={contentFooter} fill setFocusOnContainer backgroundColor="dark">
+        <div key="1">{display1}</div>
+      </ContentContainer>
+    </div>
+  );
+};
+
+export default Container;

packages/terra-core-docs/src/terra-dev-site/test/content-container/ContentContainerDark.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ContentContainer from 'terra-content-container';
+import classNames from 'classnames/bind';
+import ThemeContext from 'terra-theme-context';
+import styles from './ContentContainerTestCommon.module.scss';
+
+const cx = classNames.bind(styles);
+
+const display1 = (
+  <p className={cx('white-text')} key="1">
+    Entering patient details is a crucial process in healthcare facilities that involves capturing and documenting relevant information about
+    individuals seeking medical care. Patient details need to be regularly updated to ensure accuracy and relevancy. This may involve periodic
+    verification of personal information, updating medical history, and making necessary changes to insurance or contact details. Hospitals may
+    request patients to review and confirm their information during subsequent visits or at designated intervals. Accurate and comprehensive patient
+    details play a vital role in providing effective healthcare. They serve as a foundation for medical assessments, treatment planning, and continuity
+    of care, enabling healthcare providers to deliver personalised and efficient services to patients.Begin filling out the form by entering your personal
+    information. This usually includes your full name, contact details (such as phone number and email address), and residential address. It is crucial to
+    provide accurate contact information as it will be used for communication and verification purposes.
+  </p>
+);
+
+const contentHeader = <h3 className={cx('white-text')}>Registration Form</h3>;
+const contentFooter = <p className={cx('white-text')}>Please enter the name as per the official document</p>;
+
+const Container = () => {
+  const theme = React.useContext(ThemeContext);
+  return (
+    <div className={cx(theme.className === 'clinical-lowlight-theme' ? 'content-container-darker' : 'content-container-dark')}>
+      <ContentContainer header={contentHeader} footer={contentFooter} fill setFocusOnContainer backgroundColor="dark">
+        <div key="1">{display1}</div>
+      </ContentContainer>
+    </div>
+  );
+};
+
+export default Container;

packages/terra-core-docs/src/terra-dev-site/test/content-container/ContentContainerTestCommon.module.scss

@@ -24,8 +24,22 @@
   .content-container-fill {
     border: 1px solid;
   }
-    
+
   .content-container-fill {
     height: 200px;
   }
+
+  .content-container-dark {
+    background-color: #024978;
+    border: 1px solid #fff;
+  }
+
+  .content-container-darker {
+    background-color: #1b2326;
+    border: 1px solid #fff;
+  }
+
+  .white-text {
+    color: #fff;
+  }
 }