Toggle Button example and Accessibility fix

packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/AnimatedToggleButton.jsx

@@ -2,8 +2,16 @@ import React from 'react';
 import ToggleButton from 'terra-toggle-button';
 
 const AnimatedToggleButton = () => (
-  <ToggleButton isAnimated closedButtonText="Animated ToggleButton">
-    <p>The Cerner EHR platform, Millennium®, supports an enterprise-wide view of patient care and the point at which care is delivered in both inpatient and outpatient settings. This integration across the continuum of care enables providers to make informed, data-driven decisions without leaving the clinical workflows. Millennium offers powerful decision support that utilizes predictive algorithms to fire rules and alerts, engaging providers when a patient requires care.</p>
+  <ToggleButton isAnimated closedButtonText="Patient Profile">
+    <p style={{fontweight:'bold' }}>Medical History
+      <div>
+        <ul>
+          <li>Previous Surgeries: Appendectomy (2015)</li>
+          <li>Allergies: Pencillin</li>
+          <li>Chronic conditions :Asthma</li>
+        </ul>
+      </div>
+    </p>
   </ToggleButton>
 );
 

packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/ButtonAttrsToggleButton.jsx

@@ -2,15 +2,41 @@ import React from 'react';
 import Button from 'terra-button';
 import ToggleButton from 'terra-toggle-button';
 
-const ButtonAttrsToggleButton = () => (
-  <ToggleButton
-    closedButtonText="Button Emphasis ToggleButton"
-    buttonAttrs={{
-      variant: Button.Opts.Variants.EMPHASIS,
-    }}
-  >
-    <p>CommonWell Health Alliance, integrated with the Cerner clinical EHR platform, facilitates nationwide interoperability. CommonWell provides infrastructure to help identify patients as they transition through care facilities; locate health records regardless of where care occurred; and retrieve relevant care documents in an efficient manner.</p>
-  </ToggleButton>
-);
+const ButtonAttrsToggleButton = () => {
+  const handleLearnMoreClick = () => {
+  console.log("Learn more Clicked");
+  };
+
+  const handleContactClick = () => {
+  console.log("Contact Click");
+
+  };
+
+  return (
+    <ToggleButton
+      closedButtonText="Learn More"
+      buttonAttrs={{
+        variant: Button.Opts.Variants.EMPHASIS,
+      }}
+      onClose={handleLearnMoreClick}
+    >
+      <div>
+        <h2>Integrated Healthcare Solutions</h2>
+        <p>
+          Our healthcare system offers state-of-the-art integrated solutions that enhance patient care and improve outcomes. With our advanced electronic health records (EHR) platform and interoperability infrastructure, we aim to revolutionize the way healthcare information is shared and utilized.
+        </p>
+        <p>
+          By seamlessly connecting healthcare providers, laboratories, pharmacies, and patients, we ensure that critical health information is readily available at the point of care. Our integrated solutions streamline workflows, reduce errors, and enable informed decision-making for healthcare professionals.
+        </p>
+        <p>
+          Our platform supports nationwide interoperability, allowing healthcare facilities to access comprehensive patient records regardless of where care was provided. Through our partnership with the CommonWell Health Alliance, we facilitate secure data exchange and provide a unified view of patient information.
+        </p>
+        <p>
+          To learn more about our integrated healthcare solutions and how they can benefit your organization, please <Button text="Contact us" onClick={handleContactClick} /> for further information. Our dedicated team is ready to assist you in transforming healthcare delivery and achieving better patient outcomes.
+        </p>
+      </div>
+    </ToggleButton>
+  );
+};
 
 export default ButtonAttrsToggleButton;

packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsIconOnlyToggleButton.jsx

@@ -1,10 +1,49 @@
 import React from 'react';
 import ToggleButton from 'terra-toggle-button';
 
-const IconOnly = () => (
-  <ToggleButton isIconOnly closedButtonText="Icon Only ToggleButton">
-    <p>Cerner has been a pioneer in healthcare technology since 1979 and is well positioned to provide our clients with the stability and vision they need from their technology provider. With cumulative research and development spend exceeding $6.6 billion, Cerner will continue to deliver award-winning solutions for the now and the next.</p>
-  </ToggleButton>
-);
+const IconOnly = () => {
+  const [isButtonOn, setButtonOn] = React.useState(false);
+
+  const handleButtonClick = () => {
+    setButtonOn(!isButtonOn);
+  };
+
+  const handleBookAppointmentClick = () => {
+
+    console.log('Booking an appointment...');
+  };
+
+  const handleContactClick = () => {
+
+    console.log('Contacting us...');
+  };
+
+  return (
+    <ToggleButton
+      isIconOnly
+      closedButtonText={isButtonOn ? 'Icon Only ToggleButton (ON)' : 'Icon Only ToggleButton (OFF)'}
+      onToggle={handleButtonClick}
+    >
+      <h2>Welcome to Our Clinic!</h2>
+      <p>
+        At our clinic, we provide exceptional healthcare services for patients of all ages. Our team of experienced doctors and medical staff is dedicated to ensuring your well-being and delivering personalized care.
+      </p>
+      <p>
+        We offer a wide range of medical specialties, including cardiology, pediatrics, dermatology, orthopedics, and more. Our state-of-the-art facilities are equipped with the latest medical technologies to provide accurate diagnoses and effective treatments.
+      </p>
+      <p>
+        Whether you need a routine check-up, have a specific health concern, or require ongoing care, our compassionate healthcare professionals are here to support you every step of the way. We prioritize patient satisfaction and strive to create a comfortable and nurturing environment for everyone who walks through our doors.
+      </p>
+      <div style={{ textAlign: 'center', marginTop: '20px' }}>
+        <button onClick={handleBookAppointmentClick} className="appointment-button">
+          Book an Appointment
+        </button>
+        <button onClick={handleContactClick} className="contact-button">
+          Contact Us
+        </button>
+      </div>
+    </ToggleButton>
+  );
+};
 
 export default IconOnly;

packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsInitiallyOpenToggleButton.jsx

@@ -1,10 +1,15 @@
 import React from 'react';
+import Radio from 'terra-form-radio';
 import ToggleButton from 'terra-toggle-button';
 
 const InitiallyToggleButton = () => (
-  <ToggleButton closedButtonText="Initally Open ToggleButton" isInitiallyOpen>
-    <p>With Cerner solutions, you can share and access information among multiple facilities and across the continuum of care. Hospitals, clinics, physician offices, long-term care facilities, satellite clinics – all your locations – become connected. Cerner revenue cycle solutions are intimately integrated into the clinical process to enable the financial, operational and clinical facets of your organization to work together.</p>
-  </ToggleButton>
+  <ToggleButton closedButtonText="Patient Consent Form" isInitiallyOpen>
+  <p>The Patient Consent Form includes a button for patients to provide their consent for medical procedures or treatments. It simplifies the process by allowing patients to indicate their approval or refusal easily. The form captures the consent status, ensuring compliance with legal and ethical requirements. This enhances the healthcare application's ability to manage patient consent accurately, promoting transparency and patient autonomy.
+    <div>
+    <Radio id="Yes" labelText="Yes" name="inline-example" isInline />
+    <Radio id="No" labelText="No" name="inline-example" isInline />
+    </div>
+  </p> </ToggleButton>
 );
 
 export default InitiallyToggleButton;

packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseEventToggleButton.jsx

@@ -17,6 +17,16 @@ const OpenCloseEventToggleButton = () => {
     setTimesClosed(timesClosed + 1);
   };
 
+  const handleContactClick = () => {
+
+    console.log('Contact button clicked!');
+  };
+
+  const handleTrialSignupClick = () => {
+    // Logic to handle trial signup button click
+    console.log('Trial signup button clicked!');
+  };
+
   return (
     <div>
       <div id="on-open-event">
@@ -29,8 +39,32 @@ const OpenCloseEventToggleButton = () => {
           <span className={cx('times-wrapper')}>{timesClosed}</span>
         </p>
       </div>
-      <ToggleButton closedButtonText="Information about Model Experience" onOpen={handleOnOpen} onClose={handleOnClose}>
-        <p>New implementations of Cerner solutions use Model Experience, our collection of industry and Cerner best practices, to provide strategic recommendations for implementing and utilizing Cerner platforms. Cerner consulting services specialize in organizational change management and will help lead your organization through the implementation process. We’ll work with your employees to establish engagement and encourage best practices so your staff can confidently and competently adopt your new EHR system.</p>
+      <ToggleButton
+        closedButtonText="Explore Research"
+        onOpen={handleOnOpen}
+        onClose={handleOnClose}
+      >
+        <div className={cx('toggle-button-content')}>
+          <h2>About Our Medical Research</h2>
+          <p>
+            At our healthcare institution, we are committed to advancing medical knowledge through rigorous research and clinical trials. Our research department is dedicated to discovering innovative treatments and improving patient outcomes.
+          </p>
+          <p>
+            We focus on a wide range of medical specialties, including oncology, neurology, cardiology, and infectious diseases. By conducting research, we aim to develop new therapies, diagnostic tools, and preventive strategies that can make a significant impact on healthcare globally.
+          </p>
+          <p>
+            Our research team comprises highly skilled scientists, physicians, nurses, and support staff who collaborate to design and execute clinical studies. We follow strict ethical guidelines and adhere to regulatory requirements to ensure patient safety and maintain the integrity of our research.
+          </p>
+          <p>
+            By participating in our research studies, patients have the opportunity to access cutting-edge treatments and contribute to the advancement of medical science. We offer comprehensive support and information to participants throughout the research process.
+          </p>
+          <p>
+            If you are interested in learning more about our ongoing research projects or considering participation in a clinical trial, please <a href="#contact" onClick={handleContactClick}>contact our research department</a>. Your involvement can help us bring new breakthroughs to patients in need.
+          </p>
+          <p>
+            Additionally, you can directly sign up for a clinical trial by filling out our <a href="#trial-signup" onClick={handleTrialSignupClick}>trial signup form</a>. We will review your information and get in touch with you regarding eligibility and further steps.
+          </p>
+        </div>
       </ToggleButton>
     </div>
   );

packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseTextToggleButton.jsx

@@ -2,10 +2,21 @@ import React from 'react';
 import ToggleButton from 'terra-toggle-button';
 
 const OpenCloseTextToggleButton = () => (
-  <ToggleButton closedButtonText="Information about RTHS" openedButtonText="Information about RTHS" isAnimated>
-    <p>A real-time health system (RTHS) is a health delivery organization that leverages the use of near real-time data from many sources to help improve clinical, operational, and financial efficiency and effectiveness, and improve patient engagement in a safe and secure manner.</p>
-    <p>Cerner can help you integrate data throughout the network and within the health system, driving predictable and operational excellence with contextual awareness.</p>
+  <ToggleButton
+    closedButtonText="Close Toggle Button Text"
+    openedButtonText="Opened Toggle Button Text"
+    isAnimated
+  >
+    <div>
+      <p>
+        This is a ToggleButton component with open and close functionality. When the button is closed, the text "Close Toggle Button Text" will be displayed. When the button is opened, the text "Opened Toggle Button Text" will be displayed.
+      </p>
+      <p>
+        To use this ToggleButton user can customize the 'closedButtonText' and 'openedButtonText' props according to your desired text. User can adjust the 'isAnimated' prop to enable or disable the animation when toggling the button.
+      </p>
+    </div>
   </ToggleButton>
 );
 
 export default OpenCloseTextToggleButton;
+

packages/terra-toggle-button/CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Unreleased
+* Added the realistic examples and fixed the Accessibility issue for Open/Close text example.
 
 ## 3.68.0 - (April 27, 2023)
 

packages/terra-toggle-button/src/ToggleButton.jsx

@@ -106,7 +106,7 @@ class ToggleButton extends React.Component {
     } = this.props;
     // Set openHeaderText to the same value as closedHeaderText if its not already set
     const normalizedOpenButtonText = openedButtonText || closedButtonText;
-    const buttonText = !this.state.isOpen ? closedButtonText : normalizedOpenButtonText;
+    const buttonText = this.state.isOpen ? (normalizedOpenButtonText || closedButtonText) : closedButtonText;
     const text = isIconOnly ? closedButtonText : buttonText;
     const toggleButtonClass = cx([
       'button',
@@ -120,7 +120,12 @@ class ToggleButton extends React.Component {
         {...buttonAttrs}
         isIconOnly={isIconOnly}
         icon={<span className={cx('icon')}>{icon}</span>}
-        aria-expanded={this.state.isOpen}
+        aria-expanded={this.state.isOpen ? "true" : "false"}
+        aria-label={
+          this.state.isOpen
+            ? ` ${normalizedOpenButtonText}`
+            : ` ${closedButtonText}`
+        }
         text={text}
         onClick={this.handleOnClick}
       />