[terra-section-header] Allow sticky header title (#4037)

Co-authored-by: Sugan G <Sugan.G@cerner.com>
cerner · Feb 23, 2024 · eace3f7 · eace3f7
1 parent f6e211c
commit eace3f7
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 1 deletion.
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added test to `terra-section-header` for the sticky section header title.
+
 ## 1.58.0 - (February 20, 2024)
 
 * Changed

diff --git a/.../terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx b/.../terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/forbid-dom-props */
+import React from 'react';
+import SectionHeader from 'terra-section-header';
+
+export default () => (
+  <div style={{
+    width: '400px', height: '200px', background: 'gray', margin: '10px', overflow: 'scroll',
+  }}
+  >
+    <div style={{ width: '600px', height: '400px' }}>
+      <SectionHeader
+        text="Closed Section Header 1"
+        isTitleSticky
+        onClick={() => {}}
+      />
+      <br />
+      <SectionHeader
+        text="Closed Section Header 2"
+        isTitleSticky
+        onClick={() => {}}
+      />
+      <br />
+      <SectionHeader
+        text="Section Header 3"
+        isTitleSticky
+      />
+    </div>
+  </div>
+);
diff --git a/packages/terra-section-header/CHANGELOG.md b/packages/terra-section-header/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Allow the title of the `terra-section-header` to be sticky. 
+
 ## 2.66.0 - (February 15, 2024)
 
 * Changed

diff --git a/packages/terra-section-header/src/SectionHeader.jsx b/packages/terra-section-header/src/SectionHeader.jsx
@@ -166,7 +166,7 @@ class SectionHeader extends React.Component {
 
     return (
       <Element {...headerAttributes} className={sectionHeaderClassNames} aria-label={!onClick ? headerText : undefined}>
-        <ArrangeWrapper {...buttonAttributes} className={cx('arrange-wrapper', { 'title-fixed': isTitleFixed })}>
+        <ArrangeWrapper {...buttonAttributes} className={cx('arrange-wrapper', { 'title-fixed': isTitleFixed, 'title-sticky': headerAttributes.isTitleSticky })}>
           <Arrange
             fitStart={onClick && accordionIcon}
             fill={<span aria-hidden={(onClick !== undefined)} className={cx('title')}>{headerText}</span>}

diff --git a/packages/terra-section-header/src/SectionHeader.module.scss b/packages/terra-section-header/src/SectionHeader.module.scss
@@ -156,5 +156,12 @@
     &.title-fixed {
       position: absolute;
     }
+
+    // Make the section header title sticky
+    &.title-sticky {
+      position: sticky;
+      left: 12px;
+      width: auto;
+    }
   }
 }
diff --git a/packages/terra-section-header/tests/jest/SectionHeader.test.jsx b/packages/terra-section-header/tests/jest/SectionHeader.test.jsx
@@ -147,4 +147,17 @@ describe('SectionHeader', () => {
     const sectionHeader = wrapper.find('.arrange-wrapper.title-fixed').at(0);
     expect(sectionHeader).toHaveLength(1);
   });
+
+  it('verifies that section header with a sticky title has appropriate classes', () => {
+    const wrapper = enzyme.shallow(
+      <SectionHeader
+        text="foo"
+        level={2}
+        isTitleSticky
+      />,
+    );
+
+    const sectionHeader = wrapper.find('.arrange-wrapper.title-sticky').at(0);
+    expect(sectionHeader).toHaveLength(1);
+  });
 });