[terra-slide-panel-manager] Allow consuming teams ability to define h…

…eading levels (#1621) * Added level prop to slide-panel-manager, updated Jest snapshots, added example using level Co-authored-by: Adnan, Saad <[email protected]> Co-authored-by: Andrew Tran <[email protected]> * Added Andrew to contributors, updated changelog * Revert doc example, made default heading level 2 * Updated jest snapshots for default heading level 2 * Update slide-panel-manager changelog * Update example to include header level select * Update dev doc examples with level prop * Retrigger danger * dangerfile fix --------- Co-authored-by: Parkeenvincha,Art <[email protected]> Co-authored-by: Adnan, Saad <[email protected]> Co-authored-by: Andrew Tran <[email protected]> Co-authored-by: Andrew Tran <[email protected]>
cerner · Apr 3, 2023 · 8b5abca · 8b5abca
1 parent 9075a61
commit 8b5abca
Show file tree

Hide file tree

Showing 10 changed files with 221 additions and 19 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -45,6 +45,7 @@ Cerner Corporation
 - Michael Day [@mumkymikey]
 - Gage Phillips [@gagerdude]
 - Art Parkeenvincha [@artpark]
+- Andrew Tran [@trandrew1023]
 
 [@tbiethman]: https://github.com/tbiethman
 [@mjhenkes]: https://github.com/mjhenkes
@@ -91,3 +92,4 @@ Cerner Corporation
 [@mumkymikey]: https://github.com/mumkymikey
 [@gagerdude]: https://github.com/gagerdude
 [@artpark]: https://github.com/artpark
+[@trandrew1023]: https://github.com/trandrew1023
diff --git a/dangerfile.js b/dangerfile.js
@@ -4,7 +4,7 @@ import { danger, fail } from 'danger';
 const CHANGELOG_PATTERN = /^packages\/terra-([a-z-0-9])*\/CHANGELOG\.md/i;
 
 const changedFiles = danger.git.created_files.concat(danger.git.modified_files);
-const allowedFilepaths = ['package.json', 'src', 'translations', 'terra-framework-docs'];
+const allowedFilepaths = ['package.json', 'CHANGELOG.md', 'src', 'translations', 'terra-framework-docs'];
 
 const changedChangelogs = new Set();
 const changedPackages = new Set();

diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
@@ -5,10 +5,11 @@
 ## 1.17.0 - (March 29, 2023)
 
 * Changed
-  * Added test for `terra-slide-panel`.
   * Updated docs for `terra-slide-group`.
 * Added
   * Added package-lock.json
+  * Added test for `terra-slide-panel`.
+  * Added test for `terra-slide-panel-manager`.
 
 ## 1.16.0 - (March 1, 2023)
 

diff --git a/...ork-docs/src/terra-dev-site/doc/slide-panel-manager/example/SlidePanelManager.module.scss b/...ork-docs/src/terra-dev-site/doc/slide-panel-manager/example/SlidePanelManager.module.scss
@@ -12,4 +12,9 @@
     background-color: #add8e6;
     padding: 1rem;
   }
+
+  .form-select {
+    margin-left: 1rem;
+    max-width: 300px;
+  }
 }
diff --git a/...work-docs/src/terra-dev-site/doc/slide-panel-manager/example/SlidePanelManagerExample.jsx b/...work-docs/src/terra-dev-site/doc/slide-panel-manager/example/SlidePanelManagerExample.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 /* Slide Panel Manager example with panel behavior as "overlay" */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import ActionHeader from 'terra-action-header';
@@ -9,6 +9,7 @@ import ContentContainer from 'terra-content-container';
 import {
   availableDisclosureHeights, availableDisclosureWidths, DisclosureManagerHeaderAdapter, DisclosureManagerContext,
 } from 'terra-disclosure-manager';
+import NativeSelect from 'terra-form-select/lib/native-select/NativeSelect';
 
 import SlidePanelManager from 'terra-slide-panel-manager';
 import styles from './SlidePanelManager.module.scss';
@@ -274,12 +275,34 @@ class ContentComponent extends React.Component {
 
 ContentComponent.contextType = DisclosureManagerContext;
 
-const SlidePanelManagerExample = () => (
-  <div className={cx('example-wrapper')}>
-    <SlidePanelManager>
-      <ContentComponent />
-    </SlidePanelManager>
-  </div>
-);
+const SlidePanelManagerExample = () => {
+  const [level, setLevel] = useState(0);
+
+  return (
+    <div className={cx('example-wrapper')}>
+      <SlidePanelManager level={level === 0 ? undefined : level}>
+        <ContentComponent />
+        <br />
+        <div id="headingLevel" className={cx('form-select')}>Select panel heading level:</div>
+        <NativeSelect
+          ariaLabel="Panel heading level"
+          className={cx('form-select')}
+          isFilterStyle
+          onChange={(event) => setLevel(Number(event.currentTarget.value))}
+          options={[
+            { value: '0', display: 'Default' },
+            { value: 1, display: '1' },
+            { value: 2, display: '2' },
+            { value: 3, display: '3' },
+            { value: 4, display: '4' },
+            { value: 5, display: '5' },
+            { value: 6, display: '6' },
+          ]}
+          value={level}
+        />
+      </SlidePanelManager>
+    </div>
+  );
+};
 
 export default SlidePanelManagerExample;
diff --git a/...ocs/src/terra-dev-site/doc/slide-panel-manager/example/SlidePanelManagerSquishExample.jsx b/...ocs/src/terra-dev-site/doc/slide-panel-manager/example/SlidePanelManagerSquishExample.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 /* Slide Panel Manager example with panel behavior as "squish" */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import ActionHeader from 'terra-action-header';
@@ -9,6 +9,7 @@ import ContentContainer from 'terra-content-container';
 import {
   availableDisclosureHeights, availableDisclosureWidths, DisclosureManagerHeaderAdapter, DisclosureManagerContext,
 } from 'terra-disclosure-manager';
+import NativeSelect from 'terra-form-select/lib/native-select/NativeSelect';
 
 import SlidePanelManager from 'terra-slide-panel-manager';
 import styles from './SlidePanelManager.module.scss';
@@ -274,12 +275,34 @@ class ContentComponent extends React.Component {
 
 ContentComponent.contextType = DisclosureManagerContext;
 
-const SlidePanelManagerExample = () => (
-  <div className={cx('example-wrapper')}>
-    <SlidePanelManager>
-      <ContentComponent />
-    </SlidePanelManager>
-  </div>
-);
+const SlidePanelManagerExample = () => {
+  const [level, setLevel] = useState(0);
+
+  return (
+    <div className={cx('example-wrapper')}>
+      <SlidePanelManager level={level === 0 ? undefined : level}>
+        <ContentComponent />
+        <br />
+        <div id="headingLevel" className={cx('form-select')}>Select panel heading level:</div>
+        <NativeSelect
+          ariaLabel="Panel heading level"
+          className={cx('form-select')}
+          isFilterStyle
+          onChange={(event) => setLevel(Number(event.currentTarget.value))}
+          options={[
+            { value: '0', display: 'Default' },
+            { value: 1, display: '1' },
+            { value: 2, display: '2' },
+            { value: 3, display: '3' },
+            { value: 4, display: '4' },
+            { value: 5, display: '5' },
+            { value: 6, display: '6' },
+          ]}
+          value={level}
+        />
+      </SlidePanelManager>
+    </div>
+  );
+};
 
 export default SlidePanelManagerExample;
diff --git a/packages/terra-slide-panel-manager/CHANGELOG.md b/packages/terra-slide-panel-manager/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added `level` prop as a passthrough for the underlying `terra-action-header`
+
 ## 5.65.0 - (March 29, 2023)
 
 * Changed

diff --git a/packages/terra-slide-panel-manager/src/SlidePanelManager.jsx b/packages/terra-slide-panel-manager/src/SlidePanelManager.jsx
@@ -15,6 +15,11 @@ const propTypes = {
    * disclosure capabilities through the DisclosureManger's context API.
    */
   children: PropTypes.node,
+  /**
+   * Sets the heading level of the disclosed panel. One of `1`, `2`, `3`, `4`, `5`, `6`. This helps screen readers to announce appropriate heading levels.
+   * Changing 'level' will not visually change the style of the content.
+   */
+  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
   /**
    * The desired panel behavior. Either 'squish' or 'overlay'.
    */
@@ -31,6 +36,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  level: 2,
   panelBehavior: 'overlay',
 };
 
@@ -62,7 +68,7 @@ class SlidePanelManager extends React.Component {
 
   renderSlidePanel(manager) {
     const {
-      children, disclosureAccessory, withDisclosureContainer, ...customProps
+      children, level, disclosureAccessory, withDisclosureContainer, ...customProps
     } = this.props;
 
     let isFullscreen;
@@ -100,6 +106,7 @@ class SlidePanelManager extends React.Component {
                   <ActionHeader
                     title={headerDataForPresentedComponent.title}
                     onClose={manager.closeDisclosure}
+                    level={level}
                     onBack={manager.disclosureComponentKeys.length > 1 ? manager.dismissPresentedComponent : undefined}
                   >
                     {headerDataForPresentedComponent.collapsibleMenuView}

diff --git a/packages/terra-slide-panel-manager/tests/jest/SlidePanelManager.test.jsx b/packages/terra-slide-panel-manager/tests/jest/SlidePanelManager.test.jsx
@@ -40,6 +40,16 @@ describe('SlidePanelManager', () => {
     expect(result).toMatchSnapshot();
   });
 
+  it('should render a SlidePanelManager with level three header element and title', () => {
+    const slidePanelManager = (
+      <SlidePanelManager id="my-slide-panel-manager" className="test" level={3}>
+        <TestContainer />
+      </SlidePanelManager>
+    );
+    const wrapper = mount(slidePanelManager);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('should disclose content in SlidePanel', () => {
     const slidePanelManager = (
       <SlidePanelManager>

diff --git a/packages/terra-slide-panel-manager/tests/jest/__snapshots__/SlidePanelManager.test.jsx.snap b/packages/terra-slide-panel-manager/tests/jest/__snapshots__/SlidePanelManager.test.jsx.snap
@@ -32,6 +32,7 @@ exports[`SlidePanelManager should disclose content in Modal wrapped by disclose
 
 exports[`SlidePanelManager should disclose content in SlidePanel 1`] = `
 <SlidePanelManager
+  level={2}
   panelBehavior="overlay"
 >
   <withDisclosureManager(DisclosureManager)
@@ -296,10 +297,135 @@ exports[`SlidePanelManager should disclose content in SlidePanel 1`] = `
 </SlidePanelManager>
 `;
 
+exports[`SlidePanelManager should render a SlidePanelManager with level three header element and title 1`] = `
+<SlidePanelManager
+  className="test"
+  id="my-slide-panel-manager"
+  level={3}
+  panelBehavior="overlay"
+>
+  <withDisclosureManager(DisclosureManager)
+    render={[Function]}
+    supportedDisclosureTypes={
+      Array [
+        "panel",
+      ]
+    }
+  >
+    <DisclosureManager
+      render={[Function]}
+      supportedDisclosureTypes={
+        Array [
+          "panel",
+        ]
+      }
+    >
+      <SlidePanel
+        className="test"
+        fill={true}
+        id="my-slide-panel-manager"
+        isOpen={false}
+        mainContent={
+          <Context.Provider
+            value={
+              DisclosureManagerDelegateInstance {
+                "disclose": [Function],
+              }
+            }
+          >
+            <withDisclosureManager(Component) />
+          </Context.Provider>
+        }
+        panelBehavior="overlay"
+        panelContent={
+          <ContentContainer
+            fill={true}
+            header={<React.Fragment />}
+          >
+            <SlideGroup
+              isAnimated={true}
+              items={Array []}
+            />
+          </ContentContainer>
+        }
+        panelPosition="end"
+        panelSize="small"
+      >
+        <div
+          className="slide-panel fill test"
+          data-slide-panel-panel-behavior="overlay"
+          data-slide-panel-panel-position="end"
+          data-slide-panel-panel-size="small"
+          id="my-slide-panel-manager"
+        >
+          <div
+            className="main"
+            key="main"
+            onClick={[Function]}
+            onKeyUp={[Function]}
+            tabIndex="-1"
+          >
+            <withDisclosureManager(Component)>
+              <Component
+                disclosureManager={
+                  DisclosureManagerDelegateInstance {
+                    "disclose": [Function],
+                  }
+                }
+              >
+                <div>
+                  Hello World
+                </div>
+              </Component>
+            </withDisclosureManager(Component)>
+          </div>
+          <div
+            aria-hidden="true"
+            className="panel"
+            key="panel"
+            tabIndex="-1"
+          >
+            <ContentContainer
+              fill={true}
+              header={<React.Fragment />}
+            >
+              <div
+                className="content-container-fill"
+              >
+                <div
+                  className="header"
+                />
+                <div
+                  className="main"
+                >
+                  <Scroll
+                    className="normalizer"
+                  >
+                    <div
+                      className="scroll normalizer"
+                    >
+                      <SlideGroup
+                        isAnimated={true}
+                        items={Array []}
+                      />
+                    </div>
+                  </Scroll>
+                </div>
+              </div>
+            </ContentContainer>
+          </div>
+        </div>
+      </SlidePanel>
+    </DisclosureManager>
+  </withDisclosureManager(DisclosureManager)>
+</SlidePanelManager>
+`;
+
 exports[`SlidePanelManager should render the SlidePanelManager with custom props 1`] = `
 <SlidePanelManager
   className="test"
   id="my-slide-panel-manager"
+  level={2}
   panelBehavior="overlay"
 >
   <withDisclosureManager(DisclosureManager)
@@ -421,6 +547,7 @@ exports[`SlidePanelManager should render the SlidePanelManager with custom props
 
 exports[`SlidePanelManager should render the SlidePanelManager with defaults 1`] = `
 <SlidePanelManager
+  level={2}
   panelBehavior="overlay"
 >
   <withDisclosureManager(DisclosureManager)
@@ -539,6 +666,7 @@ exports[`SlidePanelManager should render the SlidePanelManager with defaults 1`]
 
 exports[`SlidePanelManager should render the SlidePanelManager with squish override 1`] = `
 <SlidePanelManager
+  level={2}
   panelBehavior="squish"
 >
   <withDisclosureManager(DisclosureManager)