diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/AnimatedToggleButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/AnimatedToggleButton.jsx index 9c373ffa815..3582b00b0c5 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/AnimatedToggleButton.jsx +++ b/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 = () => ( - -

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.

+ +

Medical History +

+
    +
  • Previous Surgeries: Appendectomy (2015)
    • +
  • Allergies: Pencillin
    • +
  • Chronic conditions :Asthma
    • +
+
+

); diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/ButtonAttrsToggleButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/ButtonAttrsToggleButton.jsx index 7bac33b1507..4b22ede2c9f 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/ButtonAttrsToggleButton.jsx +++ b/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 = () => ( - -

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.

- -); +const ButtonAttrsToggleButton = () => { + const handleLearnMoreClick = () => { + console.log("Learn more Clicked"); + }; + + const handleContactClick = () => { + console.log("Contact Click"); + + }; + + return ( + +
+

Integrated Healthcare Solutions

+

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

+

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

+

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

+

+ To learn more about our integrated healthcare solutions and how they can benefit your organization, please

+ + ); +}; export default ButtonAttrsToggleButton; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsIconOnlyToggleButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsIconOnlyToggleButton.jsx index 9e5da864ece..41d2c4b389f 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsIconOnlyToggleButton.jsx +++ b/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 = () => ( - -

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.

- -); +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 ( + +

Welcome to Our Clinic!

+

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

+

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

+

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

+
+ + +
+ + ); +}; export default IconOnly; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsInitiallyOpenToggleButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsInitiallyOpenToggleButton.jsx index ba8ec4f409f..02202a120a1 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/IsInitiallyOpenToggleButton.jsx +++ b/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 = () => ( - -

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.

- + +

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

+ + +
+

); export default InitiallyToggleButton; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseEventToggleButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseEventToggleButton.jsx index f662f06f199..6a61a62761b 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseEventToggleButton.jsx +++ b/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 (
@@ -29,8 +39,32 @@ const OpenCloseEventToggleButton = () => { {timesClosed}

- -

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.

+ +
+

About Our Medical Research

+

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

+

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

+

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

+

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

+

+ If you are interested in learning more about our ongoing research projects or considering participation in a clinical trial, please contact our research department. Your involvement can help us bring new breakthroughs to patients in need. +

+

+ Additionally, you can directly sign up for a clinical trial by filling out our trial signup form. We will review your information and get in touch with you regarding eligibility and further steps. +

+
); diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseTextToggleButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseTextToggleButton.jsx index 39330ad85f7..96587af397d 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-button/example/OpenCloseTextToggleButton.jsx +++ b/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 = () => ( - -

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.

-

Cerner can help you integrate data throughout the network and within the health system, driving predictable and operational excellence with contextual awareness.

+ +
+

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

+

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

+
); export default OpenCloseTextToggleButton; + diff --git a/packages/terra-toggle-button/CHANGELOG.md b/packages/terra-toggle-button/CHANGELOG.md index a2cc55b3b60..e2f858cf2b6 100644 --- a/packages/terra-toggle-button/CHANGELOG.md +++ b/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) diff --git a/packages/terra-toggle-button/src/ToggleButton.jsx b/packages/terra-toggle-button/src/ToggleButton.jsx index 5f176104b4f..caa03446e52 100644 --- a/packages/terra-toggle-button/src/ToggleButton.jsx +++ b/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={{icon}} - aria-expanded={this.state.isOpen} + aria-expanded={this.state.isOpen ? "true" : "false"} + aria-label={ + this.state.isOpen + ? ` ${normalizedOpenButtonText}` + : ` ${closedButtonText}` + } text={text} onClick={this.handleOnClick} />