[terra-section-header] Removed templates from examples (#4084)

.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
+

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)

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>
   );
 };
 

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);
@@ -9,23 +10,25 @@ const AccordionSectionHeaderAccess = () => {
     setIsOpen(!isOpen);
   };
 
-  const sectionHeaderProps = {
-    isOpen,
-    level: 3,
-    onClick: handleClick,
-  };
-
   return (
     <div>
       <Card>
         <Card.Body>
-          <AccoordianExampleTemplate text="Patient is Allergic to:" heading="Documented Allergies" sectionHeaderAttrs={sectionHeaderProps}>
+          <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>
-          </AccoordianExampleTemplate>
+          </Toggle>
         </Card.Body>
       </Card>
     </div>

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;

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;

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>
   );
 };
 

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;

packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OnClickSectionHeader.jsx

@@ -1,14 +1,18 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+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!');
   },
 };
 
-const OnClickSectionHeader = () => <SectionHeaderExampleTemplate text="OnClick Section Header" exampleProps={sectionHeaderProps} />;
+const OnClickSectionHeader = () => (
+  <div>
+    <h2>OnClick Section Header</h2>
+    <SectionHeader {...sectionHeaderProps} />
+  </div>
+);
 
 export default OnClickSectionHeader;

packages/terra-core-docs/src/terra-dev-site/doc/section-header/example/OpenSectionHeader.jsx

@@ -1,12 +1,17 @@
 import React from 'react';
-import SectionHeaderExampleTemplate from './SectionHeaderExampleTemplate';
+import SectionHeader from 'terra-section-header';
 
 const sectionHeaderProps = {
   text: 'Open',
   isOpen: true,
   onClick: () => {},
 };
 
-const OpenSectionheader = () => <SectionHeaderExampleTemplate text="Open Section Header" exampleProps={sectionHeaderProps} />;
+const OpenSectionheader = () => (
+  <div>
+    <h2>Open Section Header</h2>
+    <SectionHeader {...sectionHeaderProps} />
+  </div>
+);
 
 export default OpenSectionheader;