From 3fd0de690135d5998005974babb130a48487631c Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Thu, 4 Apr 2024 09:44:19 -0500
Subject: [PATCH 1/7] updated section-header examples

---
 .../example/AccordionSectionHeader.jsx        | 31 +++++++++++--------
 .../example/ClosedSectionHeader.jsx           |  9 ++++--
 .../example/DefaultSectionHeader.jsx          |  9 ++++--
 .../LongTitleAccordionSectionHeader.jsx       | 27 ++++++++++------
 .../example/LongTitleSectionHeader.jsx        |  9 ++++--
 .../example/OnClickSectionHeader.jsx          |  9 ++++--
 .../example/OpenSectionHeader.jsx             |  9 ++++--
 .../example/TransparentSectionHeader.jsx      | 11 +++++--
 8 files changed, 79 insertions(+), 35 deletions(-)

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeader.jsx
index d2c303c2d1b..728d7790589 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeader.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import AccoordianExampleTemplate from './AccordionExampleTemplate';
+import SectionHeader from 'terra-section-header';
+import Toggle from 'terra-toggle';
 
 const AccordionSectionHeader = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -8,19 +9,23 @@ const AccordionSectionHeader = () => {
     setIsOpen(!isOpen);
   };
 
-  const sectionHeaderProps = {
-    isOpen,
-    onClick: handleClick,
-  };
-
   return (
-    <AccoordianExampleTemplate text="Patient Allergy details:" heading="Accordion Section Header" sectionHeaderAttrs={sectionHeaderProps}>
-      <p>Allergic to Cats</p>
-      <p>Allergic to Dogs</p>
-      <p>Allergic to Dust</p>
-      <p>Allergic to Mold</p>
-      <p>Allergic to Latex</p>
-    </AccoordianExampleTemplate>
+    <div>
+      <h2>Accordion Section Header</h2>
+      <SectionHeader
+        aria-expanded={isOpen}
+        isOpen={isOpen}
+        onClick={handleClick}
+        text="Patient Allergy details"
+      />
+      <Toggle isOpen={isOpen} isAnimated>
+        <p>Allergic to Cats</p>
+        <p>Allergic to Dogs</p>
+        <p>Allergic to Dust</p>
+        <p>Allergic to Mold</p>
+        <p>Allergic to Latex</p>
+      </Toggle>
+    </div>
   );
 };
 
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/ClosedSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/ClosedSectionHeader.jsx
index cf955519da2..005381c20be 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/ClosedSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/ClosedSectionHeader.jsx
@@ -1,11 +1,16 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+import SectionHeader from 'terra-section-header';
 
 const sectionHeaderProps = {
   text: 'Closed',
   onClick: () => {},
 };
 
-const ClosedSectionHeader = () => <SectionHeaderExampleTemplate text="Closed Section Header" exampleProps={sectionHeaderProps} />;
+const ClosedSectionHeader = () => (
+  <div>
+    <h2>Closed Section Header</h2>
+    <SectionHeader {...sectionHeaderProps} />
+  </div>
+);
 
 export default ClosedSectionHeader;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/DefaultSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/DefaultSectionHeader.jsx
index 4522817ac15..5289cc2522d 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/DefaultSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/DefaultSectionHeader.jsx
@@ -1,6 +1,11 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+import SectionHeader from 'terra-section-header';
 
-const DefaultSectionHeader = () => <SectionHeaderExampleTemplate text="Default" exampleProps={{ text: 'Default Section Header' }} />;
+const DefaultSectionHeader = () => (
+  <div>
+    <h2>Default</h2>
+    <SectionHeader text="Default Section Header" />
+  </div>
+);
 
 export default DefaultSectionHeader;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleAccordionSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleAccordionSectionHeader.jsx
index 1404d86cdf6..5bd21e0483d 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleAccordionSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleAccordionSectionHeader.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import AccoordianExampleTemplate from './AccordionExampleTemplate';
+import SectionHeader from 'terra-section-header';
+import Toggle from 'terra-toggle';
 
 const LongTitleAccordionSectionHeader = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -8,15 +9,23 @@ const LongTitleAccordionSectionHeader = () => {
     setIsOpen(!isOpen);
   };
 
-  const sectionHeaderProps = {
-    isOpen,
-    onClick: handleClick,
-  };
-
   return (
-    <AccoordianExampleTemplate text="Long Title Accordion Section Header that provides data an onClick callback. This is an element provides a customizable Accordion Section Header layout with a prominent title options for the elements." heading="Long Title Accordion Section Header" sectionHeaderAttrs={sectionHeaderProps}>
-      <p>Keystone Accountable Care Organization (ACO), a collaboration between Geisinger Health System and three other health systems, entered the Medicare Shared Savings Program (MSSP) in 2013 and transitioned to an MSSP Track 1+ in 2018, qualifying Keystone ACO as an advanced payment model. According to the Centers for Medicaid and Medicare Services (CMS) benchmark minus expenditures formula, the ACO saved Medicare nearly $10 million in 2018. Hear how Keystone ACO is using the Cerner HealtheIntent® platform to garner insights across more than 72,000 ACO beneficiaries and multiple EHRs.</p>
-    </AccoordianExampleTemplate>
+    <div>
+      <h2>Long Title Accordion Section Header</h2>
+      <SectionHeader
+        aria-expanded={isOpen}
+        isOpen={isOpen}
+        onClick={handleClick}
+        text="Long Title Accordion Section Header that provides data an onClick callback. This is an element provides a customizable Accordion Section Header layout with a prominent title options for the elements."
+      />
+      <Toggle isOpen={isOpen} isAnimated>
+        <p>
+          Keystone Accountable Care Organization (ACO), a collaboration between Geisinger Health System and three other health systems, entered the Medicare Shared Savings Program (MSSP) in 2013 and transitioned to an MSSP Track 1+ in 2018, qualifying Keystone ACO as an advanced payment model.
+          According to the Centers for Medicaid and Medicare Services (CMS) benchmark minus expenditures formula, the ACO saved Medicare nearly $10 million in 2018.
+          Hear how Keystone ACO is using the Cerner HealtheIntent® platform to garner insights across more than 72,000 ACO beneficiaries and multiple EHRs.
+        </p>
+      </Toggle>
+    </div>
   );
 };
 
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleSectionHeader.jsx
index 164137db5e8..bda03d08794 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/LongTitleSectionHeader.jsx
@@ -1,6 +1,11 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+import SectionHeader from 'terra-section-header';
 
-const LongTitleSectionHeader = () => <SectionHeaderExampleTemplate text="Long Title" exampleProps={{ text: 'This is a header with long text .This is an element provides a customizable header layout with a prominent title options for the elements.This component saves time and effort in designing a header from scratch and ensures consistency across a websites pages.' }} />;
+const LongTitleSectionHeader = () => (
+  <div>
+    <h2>Long Title</h2>
+    <SectionHeader text="This is a header with long text .This is an element provides a customizable header layout with a prominent title options for the elements.This component saves time and effort in designing a header from scratch and ensures consistency across a websites pages." />
+  </div>
+);
 
 export default LongTitleSectionHeader;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx
index 182df24725a..1e951f17cf9 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+import SectionHeader from 'terra-section-header';
 
 const sectionHeaderProps = {
   text: 'I\'m clickable, click me',
@@ -9,6 +9,11 @@ const sectionHeaderProps = {
   },
 };
 
-const OnClickSectionHeader = () => <SectionHeaderExampleTemplate text="OnClick Section Header" exampleProps={sectionHeaderProps} />;
+const OnClickSectionHeader = () => (
+  <div>
+    <h2>OnClick Section Header</h2>
+    <SectionHeader {...sectionHeaderProps} />
+  </div>
+);
 
 export default OnClickSectionHeader;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OpenSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OpenSectionHeader.jsx
index 23b37d05137..1aba3fddfab 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OpenSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OpenSectionHeader.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+import SectionHeader from 'terra-section-header';
 
 const sectionHeaderProps = {
   text: 'Open',
@@ -7,6 +7,11 @@ const sectionHeaderProps = {
   onClick: () => {},
 };
 
-const OpenSectionheader = () => <SectionHeaderExampleTemplate text="Open Section Header" exampleProps={sectionHeaderProps} />;
+const OpenSectionheader = () => (
+  <div>
+    <h2>Open Section Header</h2>
+    <SectionHeader {...sectionHeaderProps} />
+  </div>
+);
 
 export default OpenSectionheader;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx
index d19acdda44c..2a2f8d501f7 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+import SectionHeader from 'terra-section-header';
 
 const sectionHeaderProps = {
-  text: 'I\'m clickable, click me',
+  text: "I'm clickable, click me",
   onClick: () => {
     // eslint-disable-next-line no-alert
     window.alert('The accordion has been clicked!');
@@ -10,6 +10,11 @@ const sectionHeaderProps = {
   isTransparent: true,
 };
 
-const TransparentSectionHeader = () => <SectionHeaderExampleTemplate text="Transparent Section Header" exampleProps={sectionHeaderProps} />;
+const TransparentSectionHeader = () => (
+  <div>
+    <h2>Transparent Section Header</h2>
+    <SectionHeader {...sectionHeaderProps} />
+  </div>
+);
 
 export default TransparentSectionHeader;

From 8c4c4ced383b9a6c5d031c7ce8b6a5baaa28a185 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Thu, 4 Apr 2024 09:44:57 -0500
Subject: [PATCH 2/7] removed unneeded templates

---
 .../example/AccordionExampleTemplate.jsx      | 111 ------------------
 .../example/SectionHeaderExampleTemplate.jsx  |  26 ----
 2 files changed, 137 deletions(-)
 delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionExampleTemplate.jsx
 delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/SectionHeaderExampleTemplate.jsx

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionExampleTemplate.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionExampleTemplate.jsx
deleted file mode 100644
index 123a65766cc..00000000000
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionExampleTemplate.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SectionHeader from 'terra-section-header';
-import Toggle from 'terra-toggle';
-
-const propTypes = {
-  /**
-   * Content in the body of the section header component that will be expanded or hidden.
-   */
-  children: PropTypes.node,
-  /**
-   * Text to be displayed in the section header.
-   */
-  heading: PropTypes.string,
-  /**
-   * Text to be displayed in the section header.
-   */
-  text: PropTypes.string,
-  /**
-   * Used to set props and HTML attributes on the underlying section-header.
-   */
-  // eslint-disable-next-line react/forbid-prop-types
-  sectionHeaderAttrs: PropTypes.object,
-  /**
-   * Sets the section-header to be animated when it is opened or closed.
-   */
-  isAnimated: PropTypes.bool,
-  /**
-   * Programmatically the section-header component.
-   */
-  isOpen: PropTypes.bool,
-};
-
-const defaultProps = {
-  sectionHeaderAttrs: {},
-  isAnimated: false,
-  isOpen: undefined,
-};
-
-class AccoordianExampleTemplate extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { isOpen: false };
-
-    this.handleOnClick = this.handleOnClick.bind(this);
-    this.wrapOnClick = this.wrapOnClick.bind(this);
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.isOpen !== undefined && prevState.isOpen !== nextProps.isOpen) {
-      return { isOpen: nextProps.isOpen };
-    }
-    return { isOpen: prevState.isOpen };
-  }
-
-  handleOnClick(event) {
-    event.preventDefault();
-    const { isOpen } = this.props;
-    if (isOpen === undefined) {
-      this.setState(prevState => ({
-        isOpen: !prevState.isOpen,
-      }));
-    }
-  }
-
-  wrapOnClick(onClick) {
-    return ((event) => {
-      this.handleOnClick(event);
-
-      if (onClick) {
-        onClick(event);
-      }
-    });
-  }
-
-  render() {
-    const {
-      children,
-      heading,
-      text,
-      isAnimated,
-      isOpen,
-      sectionHeaderAttrs,
-      ...customProps
-    } = this.props;
-
-    const sectionHeaderProps = { ...sectionHeaderAttrs };
-    sectionHeaderProps.onClick = this.wrapOnClick(sectionHeaderAttrs.onClick);
-
-    return (
-      <div {...customProps}>
-        <h2>{heading}</h2>
-        <SectionHeader
-          {...sectionHeaderProps}
-          aria-expanded={this.state.isOpen}
-          isOpen={this.state.isOpen}
-          text={text}
-        />
-        <Toggle isOpen={this.state.isOpen} isAnimated>
-          {children}
-        </Toggle>
-      </div>
-    );
-  }
-}
-
-AccoordianExampleTemplate.propTypes = propTypes;
-AccoordianExampleTemplate.defaultProps = defaultProps;
-
-export default AccoordianExampleTemplate;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/SectionHeaderExampleTemplate.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/SectionHeaderExampleTemplate.jsx
deleted file mode 100644
index 2e7a5bdaa5e..00000000000
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/SectionHeaderExampleTemplate.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SectionHeader from 'terra-section-header';
-
-const propTypes = {
-  /**
-   * Title of the example
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Props to be spread onto SectionHeader
-   */
-  // eslint-disable-next-line react/forbid-prop-types
-  exampleProps: PropTypes.object.isRequired,
-};
-
-const SectionHeaderExampleTemplate = ({ title, exampleProps }) => (
-  <div>
-    <h2>{title}</h2>
-    <SectionHeader {...exampleProps} />
-  </div>
-);
-
-SectionHeaderExampleTemplate.propTypes = propTypes;
-
-export default SectionHeaderExampleTemplate;

From e7da2e5fb61745b99b470366bbbce7f2140df441 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Thu, 4 Apr 2024 09:55:23 -0500
Subject: [PATCH 3/7] linter updates

---
 .eslintrc.yml                                              | 7 +++++++
 .../doc/section-header/example/OnClickSectionHeader.jsx    | 1 -
 .../section-header/example/TransparentSectionHeader.jsx    | 1 -
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.yml b/.eslintrc.yml
index d2f4ec6b0ac..2c166b21137 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -2,3 +2,10 @@ extends: "@cerner/terra"
 globals:
   enzyme: readonly
   enzymeIntl: readonly
+overrides:
+  - files:
+      - packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx
+      - packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx
+    rules:
+       no-alert: off
+
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx
index 1e951f17cf9..a46dad69579 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx
@@ -4,7 +4,6 @@ import SectionHeader from 'terra-section-header';
 const sectionHeaderProps = {
   text: 'I\'m clickable, click me',
   onClick: () => {
-    // eslint-disable-next-line no-alert
     window.alert('The accordion has been clicked!');
   },
 };
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx
index 2a2f8d501f7..c66b2fe0b91 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/TransparentSectionHeader.jsx
@@ -4,7 +4,6 @@ import SectionHeader from 'terra-section-header';
 const sectionHeaderProps = {
   text: "I'm clickable, click me",
   onClick: () => {
-    // eslint-disable-next-line no-alert
     window.alert('The accordion has been clicked!');
   },
   isTransparent: true,

From c15091a64ffe9f6e5baa54766635d3d815b2c9ad Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Thu, 4 Apr 2024 10:01:44 -0500
Subject: [PATCH 4/7] updated CHANGELOG

---
 packages/terra-core-docs/CHANGELOG.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index abf845e7a91..51ffdc0c64c 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -5,6 +5,9 @@
 * Added
   * Added examples and tests for `terra-dropdown-button` `SplitButton` with icons.
 
+* Changed
+  * Updated `terra-section-header` examples to be more consumer friendly by removing templates.
+
 ## 1.70.0 - (April 4, 2024)
 
 * Changed
@@ -15,6 +18,7 @@
 
 * Added
   * Added an example for `terra-hyperlink` to demonstrate text ellipses when its content should overflow.
+  *
 * Changed
   * Fixed typos and imports in `terra-list` docs.
   * Updated `terra-signature` example to include text and image signature.
@@ -30,13 +34,12 @@
 * Changed
   * Changed `terra responsive element` docs to include reflow details.
   * Updated `terra-alert` example to use `titleID` prop.
-  * Updated usage documentation for terra-form-checkbox, terra-form-input, terra-form-radio & terra-form-textarea.
+  * Updated usage documentation for `terra-form-checkbox`, `terra-form-input`, `terra-form-radio` & `terra-form-textarea`.
 
 ## 1.66.0 - (March 12, 2024)
 
-* Updated
-  * Updated terra list examples.
 * Changed
+  * Updated `terra list` examples.
   * Updated documentation for `terra-form-select`.
 
 ## 1.65.0 - (March 8, 2024)

From 38e3192cbc5d488d06d51853a5811a1cd62dad3f Mon Sep 17 00:00:00 2001
From: Saad Adnan <38024451+sdadn@users.noreply.github.com>
Date: Thu, 4 Apr 2024 13:34:07 -0500
Subject: [PATCH 5/7] Update CHANGELOG.md

---
 packages/terra-core-docs/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index 51ffdc0c64c..2875a1759b8 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -18,7 +18,7 @@
 
 * Added
   * Added an example for `terra-hyperlink` to demonstrate text ellipses when its content should overflow.
-  *
+
 * Changed
   * Fixed typos and imports in `terra-list` docs.
   * Updated `terra-signature` example to include text and image signature.

From 82ce660c3f7a694f59ef1d59bfdc8dc8c73ba9c6 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:11:01 -0500
Subject: [PATCH 6/7] updated example

---
 .../example/AccordionSectionHeaderAccess.jsx  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx
index ea1efb1ff0d..f39d32eb996 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Card from 'terra-card';
-import AccoordianExampleTemplate from './AccordionExampleTemplate';
+import SectionHeader from 'terra-section-header';
+import Toggle from 'terra-toggle';
 
 const AccordionSectionHeaderAccess = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,13 +20,21 @@ const AccordionSectionHeaderAccess = () => {
     <div>
       <Card>
         <Card.Body>
-          <AccoordianExampleTemplate text="Patient is Allergic to:" heading="Documented Allergies" sectionHeaderAttrs={sectionHeaderProps}>
-            <p>Cats</p>
-            <p>Dogs</p>
-            <p>Dust</p>
-            <p>Mold</p>
-            <p>Latex</p>
-          </AccoordianExampleTemplate>
+            <h2>Documented Allergies</h2>
+            <SectionHeader
+              aria-expanded={isOpen}
+              isOpen={isOpen}
+              level={3}
+              onClick={handleClick}
+              text="Patient is Allergic to:"
+            />
+            <Toggle isOpen={isOpen} isAnimated>
+              <p>Cats</p>
+              <p>Dogs</p>
+              <p>Dust</p>
+              <p>Mold</p>
+              <p>Latex</p>
+            </Toggle>
         </Card.Body>
       </Card>
     </div>

From 7bae355645e41f315299b257c7b2f9b3d676cf71 Mon Sep 17 00:00:00 2001
From: Saad <38024451+sdadn@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:23:52 -0500
Subject: [PATCH 7/7] linter fixes

---
 .../example/AccordionSectionHeaderAccess.jsx  | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx
index f39d32eb996..8915a3c59e6 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/AccordionSectionHeaderAccess.jsx
@@ -10,31 +10,25 @@ const AccordionSectionHeaderAccess = () => {
     setIsOpen(!isOpen);
   };
 
-  const sectionHeaderProps = {
-    isOpen,
-    level: 3,
-    onClick: handleClick,
-  };
-
   return (
     <div>
       <Card>
         <Card.Body>
-            <h2>Documented Allergies</h2>
-            <SectionHeader
-              aria-expanded={isOpen}
-              isOpen={isOpen}
-              level={3}
-              onClick={handleClick}
-              text="Patient is Allergic to:"
-            />
-            <Toggle isOpen={isOpen} isAnimated>
-              <p>Cats</p>
-              <p>Dogs</p>
-              <p>Dust</p>
-              <p>Mold</p>
-              <p>Latex</p>
-            </Toggle>
+          <h2>Documented Allergies</h2>
+          <SectionHeader
+            aria-expanded={isOpen}
+            isOpen={isOpen}
+            level={3}
+            onClick={handleClick}
+            text="Patient is Allergic to:"
+          />
+          <Toggle isOpen={isOpen} isAnimated>
+            <p>Cats</p>
+            <p>Dogs</p>
+            <p>Dust</p>
+            <p>Mold</p>
+            <p>Latex</p>
+          </Toggle>
         </Card.Body>
       </Card>
     </div>