From 36966332188011a957986796be4af69d2fa1c6d5 Mon Sep 17 00:00:00 2001 From: Alla Doroshkevych Date: Fri, 30 Jun 2023 13:52:09 -0400 Subject: [PATCH 01/97] [terra-show-hide] Shift keyboard focus to newly revealed content with focus indicator (#3830) --- packages/terra-show-hide/CHANGELOG.md | 3 + packages/terra-show-hide/src/ShowHide.jsx | 28 +- .../terra-show-hide/src/ShowHide.module.scss | 9 + .../ShowHide.module.scss | 6 + .../orion-fusion-theme/ShowHide.module.scss | 6 + .../jest/__snapshots__/ShowHide.test.jsx.snap | 351 ++++++++++++------ .../button_align_center_expanded.png | Bin 132899 -> 133799 bytes .../button_align_end_expanded.png | Bin 132889 -> 133793 bytes .../button_align_start_expanded.png | Bin 132920 -> 133821 bytes .../show-hide-spec/custom_button_expanded.png | Bin 61446 -> 62297 bytes .../show-hide-spec/default_expanded.png | Bin 132776 -> 133478 bytes .../initially_open_expanded.png | Bin 132776 -> 133478 bytes .../long_button_text_expanded.png | Bin 147162 -> 147935 bytes .../button_align_center_expanded.png | Bin 109850 -> 110635 bytes .../button_align_end_expanded.png | Bin 109847 -> 110633 bytes .../button_align_start_expanded.png | Bin 109863 -> 110632 bytes .../show-hide-spec/custom_button_expanded.png | Bin 51712 -> 52404 bytes .../show-hide-spec/default_expanded.png | Bin 109722 -> 110322 bytes .../initially_open_expanded.png | Bin 109722 -> 110322 bytes .../long_button_text_expanded.png | Bin 121777 -> 122518 bytes .../button_align_center_expanded.png | Bin 136029 -> 136802 bytes .../button_align_end_expanded.png | Bin 136024 -> 136797 bytes .../button_align_start_expanded.png | Bin 136055 -> 136824 bytes .../show-hide-spec/custom_button_expanded.png | Bin 63024 -> 63751 bytes .../show-hide-spec/default_expanded.png | Bin 135909 -> 136487 bytes .../initially_open_expanded.png | Bin 135909 -> 136487 bytes .../long_button_text_expanded.png | Bin 151165 -> 151801 bytes .../tests/wdio/show-hide-spec.js | 12 + 28 files changed, 289 insertions(+), 126 deletions(-) create mode 100644 packages/terra-show-hide/src/clinical-lowlight-theme/ShowHide.module.scss create mode 100644 packages/terra-show-hide/src/orion-fusion-theme/ShowHide.module.scss diff --git a/packages/terra-show-hide/CHANGELOG.md b/packages/terra-show-hide/CHANGELOG.md index c5e3284a1bc..429a39e2938 100644 --- a/packages/terra-show-hide/CHANGELOG.md +++ b/packages/terra-show-hide/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Shift focus to newly revealed content for screen-reader users. + ## 2.60.0 - (April 27, 2023) * Changed diff --git a/packages/terra-show-hide/src/ShowHide.jsx b/packages/terra-show-hide/src/ShowHide.jsx index 80ee10fa9d0..736d1618c9d 100644 --- a/packages/terra-show-hide/src/ShowHide.jsx +++ b/packages/terra-show-hide/src/ShowHide.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import Toggle from 'terra-toggle'; import { injectIntl } from 'react-intl'; import classNames from 'classnames/bind'; +import ThemeContext from 'terra-theme-context'; import styles from './ShowHide.module.scss'; import Button from './_ShowHideButton'; @@ -58,6 +59,15 @@ const ShowHide = (props) => { ...customProps } = props; + const theme = React.useContext(ThemeContext); + const ref = React.useRef(null); + + React.useEffect(() => { + if (isOpen && ref?.current) { + ref.current.focus(); + } + }, [isOpen]); + const buttonClassName = cx([ 'show-hide', 'button', @@ -74,13 +84,25 @@ const ShowHide = (props) => { intlButtonText = intl.formatMessage({ id: 'Terra.showhide.showmore' }); } } + /** + * This prevents container from getting focus on click. + * Does not prevent container's children to receive focus and be click-able. + */ return (
{!isOpen && preview} - - {children} - +
+ + {children} + +
} isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

{sentences[0]}

+
    +
  • {sentences[1]}
    • +
  • {sentences[2]}
    • +
  • {sentences[3]}
    • +
  • {sentences[4]}
    • +
+

+

{text2}

+ + ); + } +} + +export default MultipleChildrenShowHide; diff --git a/packages/terra-show-hide/src/ShowHide.jsx b/packages/terra-show-hide/src/ShowHide.jsx index 5a66374157c..b8804fb7895 100644 --- a/packages/terra-show-hide/src/ShowHide.jsx +++ b/packages/terra-show-hide/src/ShowHide.jsx @@ -4,12 +4,12 @@ import React, { import PropTypes from 'prop-types'; import Toggle from 'terra-toggle'; import { injectIntl } from 'react-intl'; +import { v4 as uuidv4 } from 'uuid'; import classNames from 'classnames/bind'; import ThemeContext from 'terra-theme-context'; import styles from './ShowHide.module.scss'; import Button from './_ShowHideButton'; import Paragraph from './_ShowHideParagraph'; -import { v4 as uuidv4 } from 'uuid'; const cx = classNames.bind(styles); From 718197101ffd0efcc953cbe720d0c7fa3994df96 Mon Sep 17 00:00:00 2001 From: Alla Doroshkevych Date: Thu, 27 Jul 2023 19:30:43 -0400 Subject: [PATCH 68/97] Paragrahp renamed to be focuser, examples and docs updated --- .../doc/show-hide/About.1.doc.mdx | 106 +++++++++--------- .../example/ButtonAlignCenterShowHide.jsx | 10 +- .../example/ButtonAlignRightShowHide.jsx | 10 +- .../example/CustomButtonTextShowHide.jsx | 51 +++++---- .../doc/show-hide/example/DefaultShowHide.jsx | 12 +- .../example/InitiallyOpenShowHide.jsx | 12 +- .../doc/show-hide/example/LinkShowHide.jsx | 14 ++- .../example/MultipleChildrenShowHide.jsx | 60 ---------- .../show-hide/example/NoFocusRefShowHide.jsx | 4 +- .../show-hide/example/NoPreviewShowHide.jsx | 6 +- .../ButtonAlignCenterShowHide.test.jsx | 10 +- .../show-hide/ButtonAlignEndShowHide.test.jsx | 10 +- .../ButtonAlignStartShowHide.test.jsx | 10 +- .../CustomButtonTextShowHide.test.jsx | 4 +- .../test/show-hide/DefaultShowHide.test.jsx | 10 +- .../show-hide/InitiallyOpenShowHide.test.jsx | 10 +- .../show-hide/InteractiveShowHide.test.jsx | 4 +- .../show-hide/LongButtonTextShowHide.test.jsx | 10 +- .../test/show-hide/NoPreviewShowHide.test.jsx | 6 +- packages/terra-show-hide/src/ShowHide.jsx | 4 +- ...HideParagraph.jsx => _ShowHideFocuser.jsx} | 24 ++-- .../tests/jest/ShowHide.test.jsx | 2 + .../tests/jest/_ShowHideFocuser.test.jsx | 40 +++++++ .../tests/jest/_ShowHideParagraph.test.jsx | 41 ------- .../jest/__snapshots__/ShowHide.test.jsx.snap | 45 ++++++++ ...sx.snap => _ShowHideFocuser.test.jsx.snap} | 11 +- .../button_align_center_expanded.png | Bin 136444 -> 135876 bytes .../button_align_end_expanded.png | Bin 136441 -> 135872 bytes .../button_align_start_expanded.png | Bin 136472 -> 135901 bytes .../show-hide-spec/default_expanded.png | Bin 136472 -> 135901 bytes .../default_expanded_no_focus.png | Bin 133315 -> 133301 bytes .../initially_open_expanded.png | Bin 136472 -> 135901 bytes .../interactive_show_hide_expanded.png | Bin 46915 -> 46920 bytes .../long_button_text_expanded.png | Bin 150862 -> 150291 bytes .../button_align_center_expanded.png | Bin 112935 -> 112961 bytes .../button_align_end_expanded.png | Bin 112932 -> 112958 bytes .../button_align_start_expanded.png | Bin 112948 -> 112973 bytes .../show-hide-spec/default_expanded.png | Bin 112948 -> 112973 bytes .../default_expanded_no_focus.png | Bin 110099 -> 110096 bytes .../initially_open_expanded.png | Bin 112948 -> 112973 bytes .../interactive_show_hide_expanded.png | Bin 38556 -> 38501 bytes .../long_button_text_expanded.png | Bin 125026 -> 125051 bytes .../button_align_center_expanded.png | Bin 139414 -> 138804 bytes .../button_align_end_expanded.png | Bin 139414 -> 138803 bytes .../button_align_start_expanded.png | Bin 139446 -> 138834 bytes .../show-hide-spec/default_expanded.png | Bin 139446 -> 138834 bytes .../default_expanded_no_focus.png | Bin 136308 -> 136282 bytes .../initially_open_expanded.png | Bin 139446 -> 138834 bytes .../interactive_show_hide_expanded.png | Bin 47961 -> 47964 bytes .../long_button_text_expanded.png | Bin 154693 -> 154098 bytes .../tests/wdio/show-hide-spec.js | 4 - 51 files changed, 262 insertions(+), 268 deletions(-) delete mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/MultipleChildrenShowHide.jsx rename packages/terra-show-hide/src/{_ShowHideParagraph.jsx => _ShowHideFocuser.jsx} (76%) create mode 100644 packages/terra-show-hide/tests/jest/_ShowHideFocuser.test.jsx delete mode 100644 packages/terra-show-hide/tests/jest/_ShowHideParagraph.test.jsx rename packages/terra-show-hide/tests/jest/__snapshots__/{_ShowHideParagraph.test.jsx.snap => _ShowHideFocuser.test.jsx.snap} (73%) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/About.1.doc.mdx index 445d5f3600d..8f637db8090 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/About.1.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/About.1.doc.mdx @@ -9,10 +9,9 @@ import ButtonAlignCenterShowHide from './example/ButtonAlignCenterShowHide?dev-s import ButtonAlignRightShowHide from './example/ButtonAlignRightShowHide?dev-site-example'; import NoPreviewShowHide from './example/NoPreviewShowHide?dev-site-example'; import NoFocusRefShowHide from './example/NoFocusRefShowHide?dev-site-example'; -import MultipleChildrenShowHide from './example/MultipleChildrenShowHide?dev-site-example'; import ShowHidePropsTable from 'terra-show-hide/src/ShowHide?dev-site-props-table'; -import ParagraphPropsTable from 'terra-show-hide/src/_ShowHideParagraph?dev-site-props-table'; +import FocuserPropsTable from 'terra-show-hide/src/_ShowHideFocuser?dev-site-props-table'; @@ -47,31 +46,42 @@ The Show-Hide component must be composed inside the [Base][1] component with a l ## Usage ```jsx -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; ``` -#### A single paragraph of text - - At the top level of your component declare a `ref`, pass it as `focusRef` props to `ShowHide` component. Pass a preview node as a prop to `ShowHide` component. - - Use `Paragraph` component inside `

` tag. A `Paragraph` component allows `ShowHide` component to set focus on the beginning of the hidden portion of the text upon opening. - - The text splitted in the preview and the rest of the text portions has to be passed as string props, and the `focusRef` should be forwarded to `Paragraph` component. +## Accessibility + + + + - The main goal of the `ShowHide` component is to provide a possibility to truncate long paragraphs of text. It provides some challenges in terms of making the hidden content accessible. Please, review the provided examples. It's important to follow the instructions to make the component accessible. + - Even though the `focusRef` prop is currently optional for backward compatibility, a failure to use it will result in lack of accessibility. + - Consider using the `ToggleButton` component in cases you can't follow the instructions. + + + +#### Truncate a paragraph of text + - At the top level of your component declare a `ref`, pass it as `focusRef` props to `ShowHide` component. + - Pass a preview node with the portion of the text as a prop to `ShowHide` component. + - Use `Focuser` component inside `

` tag. A `Focuser` component allows `ShowHide` component to set focus on the beginning of the focusable text upon opening. + - The text splitted in the prefix and focusable text portions has to be passed as string props. The prefix prop should contain the portion of the text that was a part of the preview prop, passed to `ShowHide`. + - Forward `focusRef` to `Focuser` component. ```jsx import React, { useRef, useState } from 'react'; - import ShowHide, { Paragraph } from 'terra-show-hide'; + import ShowHide, { Focuser } from 'terra-show-hide'; const MyComponent = () => { const focusRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const toggleShowHide = () => setIsOpen(!isOpen); - // Split text into preview text and the rest of the text you wish to be revealed when the 'show' action is taken. - const previewText = 'Patients are requesting greater affordability and efficiency in healthcare.'; - const text = 'With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing.'; + const prefix = 'Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing.'; + const focusableText = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients. Read'; return ( - { previewText }

} isOpen={isOpen} onChange={toggleShowHide} > + {prefix}

} isOpen={isOpen} onChange={toggleShowHide} >

- +

); @@ -79,50 +89,38 @@ import ShowHide, { Paragraph } from 'terra-show-hide'; ``` #### Multiple children - - At the top level of your component declare a `ref`, pass it as `focusRef` props to `ShowHide` component. Pass a preview node as a prop to `ShowHide` component. - - A `Paragraph` component allows `ShowHide` component to set focus on the beginning of the hidden portion of the text upon opening. - - Duplicate the preview nodes as `ShowHide` children. - - When the preview nodes end, add a `Paragraph` element as a child to the next node. - - Forwarding `focusRef` to `Paragraph` component allows `ShowHide` component to set focus on the beginning of the text in that node upon opening. - - Pass the text as a prop to `Paragraph` component. Omit `previewText` prop. + Even though the main purpose of the `ShowHide` component is to truncate long paragraps of texts, the content of the `ShowHide` does not have to be one paragraph. It can include links, lists, and any king of HTML tags as long as the first line of the hidden text is passed as a string prop to `Focuser` component rather than an HTML element. Please note: + - Links can be placed inside the `p` tag that wrapps `Focuser` component both preceding and following it. The prop `prefix` can be omitted if content has been passes as an HTML element preceding `Focuser`. + - Everythin that precedes `Focuser` component must be also included into the `ShowHide` preview prop. + - Do not break lists placing `Focuser` inside `li`, unless you assign `display:block` to the list items in that list. It might break the assistive technologies reading order. ```jsx import React, { useState, useRef } from 'react'; - import ShowHide, { Paragraph } from 'terra-show-hide'; + import ShowHide, { Focuser } from 'terra-show-hide'; const MyComponent = () => { const focusRef = useRef(null); const [isOpen, setIsOpen] = useState(false); const toggleShowHide = () => setIsOpen(!isOpen); - // This example's content is a header and a list of 4 items. - const header = 'Key Benefits of Cerner Cardiovascular Solutions'; - const list = [ - 'Eliminates silos of information and the resulting inefficiencies with a unified EHR and cardiovascular system', - 'Enhances clinical, financial and performance outcomes with comprehensive procedural documentation', - 'Creates efficient diagnostic workflows, image management and analysis', - 'Promotes cardiac disease management through health maintenance protocols', - ]; - - // The header and the first two items of the list will be displayed in preview portion. + const header = 'Bringing clarity to life sciences and healthcare decision-making '; + const prefix = 'When we accelerate the discovery, development and deployment of life-enhancing insights and therapies, clinicians and patients benefit.'; const preview = [ -

{header}

, -
    -
  • {list[0]}
    • -
  • {list[1]}
    • -
, +

{header}

, +

{prefix}

, ]; return (

{header}

+
    -
  • {list[0]}
    • -
  • {list[1]}
    • -
  • - -
    • -
  • {list[3]}
    • +
  • Data-driven research solutions for commercial and real-world evidence collaborators and health providers
    • +
  • Support to move from simply accumulating and analyzing data to linking and generating deeper insights
    • +
  • Combined life sciences knowledge, healthcare innovation and collaborative research expertise
); @@ -131,7 +129,7 @@ import ShowHide, { Paragraph } from 'terra-show-hide'; #### First hidden child is an interactive element (link, button, etc) - At the top level of your component declare a `ref`. - - Forward `focusRef` to the interactive element directly. There is no need to use `Paragraph` in this case. + - In this case there is no need to use `Focuser`. Forward `focusRef` to the interactive element directly. ```jsx import React, { useState, useRef } from 'react'; @@ -142,25 +140,21 @@ import ShowHide, { Paragraph } from 'terra-show-hide'; const [isOpen, setIsOpen] = useState(false); const toggleShowHide = () => setIsOpen(!isOpen); - const previewText = 'Patients are requesting greater affordability and efficiency in healthcare.'; + const previewText = 'Although the process is complex and will vary greatly based on regional and economic factors, it’s clear that healthcare entities must start planning their transitions now.'; + const text = 'it expects all Medicare Parts A and B beneficiaries and most Medicaid beneficiaries to be in a value-based care relationship with accountability for quality and total cost of care by 2030.'; return ( - { previewText }

} isOpen={isOpen} onChange={toggleShowHide} > -

{ previewText }

- Oracle Cerner + {previewText}

} isOpen={isOpen} onChange={toggleShowHide} > +

+ {previewText} + CMS recently announced + {text} +

); } ``` -## Accessibility - - - -In order for the component to be accessible, it's important to follow the implimentation guidance. The focusRef prop is currently optional for backward compatibility, a failure to use it will result in lack of accessibility. - - - ## Component Features * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support) @@ -184,5 +178,5 @@ In order for the component to be accessible, it's important to follow the implim ## Show Hide Props -## Paragraph Props - +## Focuser Props + diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignCenterShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignCenterShowHide.jsx index f19a0a7f0d9..a95a10982ca 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignCenterShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignCenterShowHide.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'According to the Journal of Healthcare Management/American College of Healthcare Executives, a 500-bed hospital loses over $4 million annually due to clinical communication inefficiencies. A unified clinical communication strategy can help health systems begin to close the gap'; -const text = 'and improve efficiency at every level. Enable your clinical care team with real-time health communication tools and workflows that help them to collaborate more effectively on the go and provide a quality patient care experience. A unified strategy and improved communication tools can help address many challenges including identification of patient care team members, mobile clinical workflows, secure and timely critical alerts, and more.'; +const prefix = 'According to the Journal of Healthcare Management/American College of Healthcare Executives, a 500-bed hospital loses over $4 million annually due to clinical communication inefficiencies. A unified clinical communication strategy can help health systems begin to close the gap'; +const focusableText = 'and improve efficiency at every level. Enable your clinical care team with real-time health communication tools and workflows that help them to collaborate more effectively on the go and provide a quality patient care experience. A unified strategy and improved communication tools can help address many challenges including identification of patient care team members, mobile clinical workflows, secure and timely critical alerts, and more.'; class ButtonAlignCenterShowHide extends React.Component { constructor(props) { @@ -22,8 +22,8 @@ class ButtonAlignCenterShowHide extends React.Component { render() { return (
- {previewText}

} isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

+ {prefix}

} isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

); diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignRightShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignRightShowHide.jsx index 07b9f9f5e6f..c58cde2fdd1 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignRightShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/ButtonAlignRightShowHide.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'A connected care team starts with an integrated communication strategy. CareAware ConnectTM is a healthcare communication tool that leverages the use of intuitive technology to help associate the right care team members with the right patients and provides a way to effectively'; -const text = 'communicate and collaborate while on the go through a smart, mobile device. Integration with Cerner Millennium® enables care teams to streamline bedside workflows including medication administration, device association, and specimen collection.'; +const prefix = 'A connected care team starts with an integrated communication strategy. CareAware ConnectTM is a healthcare communication tool that leverages the use of intuitive technology to help associate the right care team members with the right patients and provides a way to effectively'; +const focusableText = 'communicate and collaborate while on the go through a smart, mobile device. Integration with Cerner Millennium® enables care teams to streamline bedside workflows including medication administration, device association, and specimen collection.'; class ButtonAlignRightShowHideTest extends React.Component { constructor(props) { @@ -22,8 +22,8 @@ class ButtonAlignRightShowHideTest extends React.Component { render() { return (
- {previewText}

} isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

+ {prefix}

} isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

); diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/CustomButtonTextShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/CustomButtonTextShowHide.jsx index 4b1cacbc239..f94df144c9f 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/CustomButtonTextShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/CustomButtonTextShowHide.jsx @@ -1,21 +1,25 @@ -/* eslint-disable react/forbid-dom-props */ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const sentences = [ - 'Key Benefits of Cerner Cardiovascular Solutions', - 'Eliminates silos of information and the resulting inefficiencies with a unified EHR and cardiovascular system.', - 'Creates efficient diagnostic workflows, image management and analysis.', - 'Enhances clinical, financial and performance outcomes with comprehensive procedural documentation.', - 'Promotes cardiac disease management through health maintenance protocols.', +const header = 'Bringing clarity to life sciences and healthcare decision-making '; +const text = [ + 'When we accelerate the discovery, development and deployment of life-enhancing insights and therapies, clinicians and patients benefit. Connecting data and breaking down silos', + 'across the healthcare innovation ecosystem must be our collective focus to help improve everyday health for all people. Several factors help bring clarity to life sciences, researchers and clinicians and', + 'guide better care,', + 'including:', ]; +const listItems = [ +
  • Data-driven research solutions for commercial and real-world evidence collaborators and health providers
    • , +
  • Support to move from simply accumulating and analyzing data to linking and generating deeper insights
    • , +
  • Combined life sciences knowledge, healthcare innovation and collaborative research expertise
    • , +
  • Access to an expansive network of diverse research-ready health systems; as well as de-identified, real-world data from the EHR that also includes patient-reported outcomes
    • , +]; +const conclusion = 'Through data and technology, we have the power to help life sciences, clinicians and researchers expand therapeutic areas of research and generate better evidence to solve healthcare challenges around the world. Together, we can accelerate groundbreaking research and trial opportunities that have the potential to transform everyday healthcare and improve people’s lives.'; const preview = [ -

    {sentences[0]}

    , -
      -
    • {sentences[1]}
      • -
    • {sentences[2]}
      • -
    , +

    {header}

    , +

    {text[0]}

    , ]; class CustomButtonTextShowHide extends React.Component { @@ -37,9 +41,9 @@ class CustomButtonTextShowHide extends React.Component { let customText = ''; if (this.state.isOpen) { - customText = `Hide ${sentences.length - 3} Sentences`; + customText = 'Hide Composit Content'; } else { - customText = `Show ${sentences.length - 3} More Sentences`; + customText = 'Show Composit Content'; } return ( @@ -50,13 +54,16 @@ class CustomButtonTextShowHide extends React.Component { buttonText={customText} focusRef={this.focusRef} > -

    {sentences[0]}

    -
      -
    • {sentences[1]}
      • -
    • {sentences[2]}
      • -
      • -
    • {sentences[4]}
      • -
    +

    {header}

    +

    + + {' '} + {text[2]} + {' '} + {text[3]} +

    +
      {listItems}
    +

    {conclusion}

     ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/DefaultShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/DefaultShowHide.jsx index 241e24848b1..f5a17fce6a8 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/DefaultShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/DefaultShowHide.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing.'; -const text = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.'; +const prefix = 'Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing.'; +const focusableText = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients. Read'; class DefaultShowHide extends React.Component { constructor(props) { @@ -21,8 +21,10 @@ class DefaultShowHide extends React.Component { render() { return ( - {previewText}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    + {prefix}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

    + +

    ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/InitiallyOpenShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/InitiallyOpenShowHide.jsx index 0087eda6298..a296aebedec 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/InitiallyOpenShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/InitiallyOpenShowHide.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Cerner cardiovascular solutions are embedded within the EHR, allowing for a holistic patient record that includes: diagnostic activities, therapeutic interventions and follow-up regimens. Electrocardiogram (ECG) objects are digitized and accessed within the EHR providing physicians'; -const text = 'in your cardiology department the ability to receive and present ECG data in mere seconds after it is acquired. This eliminates the necessity for a separate ECG information system.'; +const prefix = 'Cerner cardiovascular solutions are embedded within the EHR, allowing for a holistic patient record that includes: diagnostic activities, therapeutic interventions and follow-up regimens. Electrocardiogram (ECG) objects are digitized and accessed within the EHR providing physicians'; +const focusableText = 'in your cardiology department the ability to receive and present ECG data in mere seconds after it is acquired. This eliminates the necessity for a separate ECG information system.'; class InitiallyOpenShowHide extends React.Component { constructor(props) { @@ -21,8 +21,10 @@ class InitiallyOpenShowHide extends React.Component { render() { return ( - {previewText}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    + {prefix}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

    + +

    ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/LinkShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/LinkShowHide.jsx index 1715a2e0528..a46f6f08397 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/LinkShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/LinkShowHide.jsx @@ -1,8 +1,8 @@ import React from 'react'; import ShowHide from 'terra-show-hide'; -const previewText = 'Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing.'; -const text = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.'; +const previewText = 'Although the process is complex and will vary greatly based on regional and economic factors, it’s clear that healthcare entities must start planning their transitions now.'; +const text = 'it expects all Medicare Parts A and B beneficiaries and most Medicaid beneficiaries to be in a value-based care relationship with accountability for quality and total cost of care by 2030.'; class LinkShowHide extends React.Component { constructor(props) { @@ -22,9 +22,13 @@ class LinkShowHide extends React.Component { render() { return ( {previewText}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    {previewText}

    - Oracle Cerner -

    {text}

    +

    + {previewText} + {' '} + CMS recently announced + {' '} + {text} +

    ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/MultipleChildrenShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/MultipleChildrenShowHide.jsx deleted file mode 100644 index 1b7d8715112..00000000000 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/MultipleChildrenShowHide.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; - -const splittedText = ['Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing.', 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.']; - -const sentences = [ - 'Key Benefits of Cerner Cardiovascular Solutions', - 'Eliminates silos of information and the resulting inefficiencies with a unified EHR and cardiovascular system.', - 'Creates efficient diagnostic workflows, image management and analysis.', - 'Enhances clinical, financial and performance outcomes with comprehensive procedural documentation.', - 'Promotes cardiac disease management through health maintenance protocols.', -]; - -const text2 = 'Cerner cardiovascular solutions are embedded within the EHR, allowing for a holistic patient record that includes: diagnostic activities, therapeutic interventions and follow-up regimens. Electrocardiogram (ECG) objects are digitized and accessed within the EHR providing physicians in your cardiology department the ability to receive and present ECG data in mere seconds after it is acquired. This eliminates the necessity for a separate ECG information system.'; - - -const preview = [ -

    {sentences[0]}

    , -
      -
    • {sentences[1]}
      • -
    • {sentences[2]}
      • -
    • {sentences[3]}
      • -
    • {sentences[4]}
      • -
    , -

    {splittedText[0]}

    , -]; - -class MultipleChildrenShowHide extends React.Component { - constructor(props) { - super(props); - - this.state = { isOpen: false }; - this.toggleShowHide = this.toggleShowHide.bind(this); - this.focusRef = React.createRef(); - } - - toggleShowHide() { - this.setState(prevState => ({ - isOpen: !prevState.isOpen, - })); - } - - render() { - return ( - { preview }

    + + guide better care +

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    {sentences[0]}

    -
      -
    • {sentences[1]}
      • -
    • {sentences[2]}
      • -
    • {sentences[3]}
      • -
    • {sentences[4]}
      • -
    -

    -

    {text2}

    - - ); - } -} - -export default MultipleChildrenShowHide; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoFocusRefShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoFocusRefShowHide.jsx index caae635c62b..c1eb5135caf 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoFocusRefShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoFocusRefShowHide.jsx @@ -1,8 +1,8 @@ import React from 'react'; import ShowHide from 'terra-show-hide'; -const fullText = 'Patients are requesting greater affordability and efficiency in healthcare. With procedures performed in an ambulatory surgery center costing up to 60% less compared to a hospital outpatient department (1), the demand for these facilities is increasing. In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care. Healthcare IT products can help improve clinician efficiency and patient outcomes, as well as enhance communication and data exchange between ambulatory surgery center providers and patients.'; -const previewText = fullText.substring(0, 280); +const fullText = 'Successful value-based care strategies must demonstrate proficiency in optimizing venues of care to improve health outcomes, lower costs and increase consumer access and satisfaction. They must be able to analyze and predict the unique needs of each individual and appropriately match them to the skills offered in their network.'; +const previewText = fullText.substring(0, 278); class NoFocusRefShowHide extends React.Component { constructor(props) { diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoPreviewShowHide.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoPreviewShowHide.jsx index 53438eb7f12..a3ac0b731e3 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoPreviewShowHide.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/show-hide/example/NoPreviewShowHide.jsx @@ -1,7 +1,7 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const text = 'CareAware is Cerners comprehensive enterprise-wide solution for device connectivity. CareAware® is a suite of solutions that enable any area of a hospital to create an environment where all devices are integrated and contextually aware to ensure the right data is presented in the right format at the right time.'; +const focusableText = 'CareAware is Cerners comprehensive enterprise-wide solution for device connectivity. CareAware® is a suite of solutions that enable any area of a hospital to create an environment where all devices are integrated and confocusableTextually aware to ensure the right data is presented in the right format at the right time.'; class NoPreviewShowHide extends React.Component { constructor(props) { @@ -21,7 +21,7 @@ class NoPreviewShowHide extends React.Component { render() { return ( -

    +

    ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignCenterShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignCenterShowHide.test.jsx index c228b7705e1..3b71cb38749 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignCenterShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignCenterShowHide.test.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; -const text = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; +const prefix = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; +const focusableText = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; class ButtonAlignCenterShowHide extends React.Component { constructor(props) { @@ -22,8 +22,8 @@ class ButtonAlignCenterShowHide extends React.Component { render() { return (
    - {previewText}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    + {prefix}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

    ); diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignEndShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignEndShowHide.test.jsx index c59656c2ae4..19e568eda11 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignEndShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignEndShowHide.test.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; -const text = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; +const prefix = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; +const focusableText = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; class ButtonAlignRightShowHideTest extends React.Component { constructor(props) { @@ -22,8 +22,8 @@ class ButtonAlignRightShowHideTest extends React.Component { render() { return (
    - {previewText}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    + {prefix}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

    ); diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignStartShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignStartShowHide.test.jsx index 8eda3c6ad16..dcac8349c1a 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignStartShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/ButtonAlignStartShowHide.test.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; -const text = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; +const prefix = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; +const focusableText = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; class ButtonAlignLeftShowHideTest extends React.Component { constructor(props) { @@ -22,8 +22,8 @@ class ButtonAlignLeftShowHideTest extends React.Component { render() { return (
    - {previewText}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    + {prefix}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

    ); diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/CustomButtonTextShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/CustomButtonTextShowHide.test.jsx index 91517d5e9c2..ef2386cc9ba 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/CustomButtonTextShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/CustomButtonTextShowHide.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; const sentence = 'Lorem ipsum dolor sit amet consectetur adipiscing elit.'; @@ -47,7 +47,7 @@ class CustomButtonTextShowHideTest extends React.Component {
    • {`${sentence}`}
    • {`${sentence}`}
      • -
      • +
    • {`${sentence}`}
    • {`${sentence}`}
    diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/DefaultShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/DefaultShowHide.test.jsx index e87b2658b34..d7f6beaa698 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/DefaultShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/DefaultShowHide.test.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; -const text = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; +const prefix = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; +const focusableText = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; class DefaultShowHide extends React.Component { constructor(props) { @@ -21,8 +21,8 @@ class DefaultShowHide extends React.Component { render() { return ( - {previewText}

    } onChange={this.toggleShowHide}> -

    + {prefix}

    } onChange={this.toggleShowHide}> +

    ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InitiallyOpenShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InitiallyOpenShowHide.test.jsx index 02a36817272..f3c9ce2d7e3 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InitiallyOpenShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InitiallyOpenShowHide.test.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; -const text = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; +const prefix = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; +const focusableText = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; class InitiallyOpenShowHide extends React.Component { constructor(props) { @@ -21,8 +21,8 @@ class InitiallyOpenShowHide extends React.Component { render() { return ( - {previewText}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> -

    + {prefix}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide}> +

    ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InteractiveShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InteractiveShowHide.test.jsx index f7e3a3c3262..0523693a9cb 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InteractiveShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/InteractiveShowHide.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import ShowHide from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; const sentence = 'Lorem ipsum dolor sit amet consectetur adipiscing elit.'; @@ -48,7 +48,7 @@ class InteractiveShowHideTest extends React.Component { buttonText={customText} > {preview} -

    {sentence}

    +

    Link {text}     diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/LongButtonTextShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/LongButtonTextShowHide.test.jsx index 11118d4dada..bbffa7ce639 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/LongButtonTextShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/LongButtonTextShowHide.test.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const previewText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; -const text = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; +const prefix = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor le'; +const focusableText = 'o ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; class DefaultShowHide extends React.Component { constructor(props) { @@ -23,12 +23,12 @@ class DefaultShowHide extends React.Component { return ( {previewText}

    } + preview={

    {prefix}

    } isOpen={this.state.isOpen} onChange={this.toggleShowHide} buttonText="Show Section Label that is way too long and has to wrap to multiple lines Show Section Label that is way too long and has to wrap to multiple lines" > -

    +

    ); } diff --git a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/NoPreviewShowHide.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/NoPreviewShowHide.test.jsx index d3070cdb44d..60504c89623 100644 --- a/packages/terra-core-docs/src/terra-dev-site/test/show-hide/NoPreviewShowHide.test.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/test/show-hide/NoPreviewShowHide.test.jsx @@ -1,7 +1,7 @@ import React from 'react'; -import ShowHide, { Paragraph } from 'terra-show-hide'; +import ShowHide, { Focuser } from 'terra-show-hide'; -const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor leo ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; +const focusableText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ante, porta sit amet sem vitae, pellentesque pharetra ex. Etiam odio purus, maximus eget mauris in, pulvinar euismod neque. Curabitur eu vulputate leo. Etiam tincidunt lectus ut metus interdum, sit amet porttitor leo ornare. Sed tincidunt rutrum odio, dignissim rhoncus nulla finibus et. Mauris mollis posuere dolor dignissim vulputate. Sed accumsan dignissim mi id pulvinar. Vivamus sapien nibh, dignissim id semper non, consectetur et felis. Duis mattis odio tortor, eu mattis lectus lobortis mattis. Ut sit amet risus pellentesque, imperdiet mi eu, sodales massa. Aenean quis lacus rutrum, lobortis urna vel, congue est. Vivamus viverra efficitur viverra. Integer sit amet metus dolor. Nullam imperdiet vehicula tincidunt. Duis consequat congue magna, eu imperdiet magna venenatis et. Quisque eget vulputate massa. Donec vel diam vel nulla gravida blandit sit amet sed quam. Donec sed feugiat magna, eget consequat mi. Ut quis arcu non libero tempus semper nec in sem. Nunc in quam leo. Donec risus eros, dapibus ut nisi vitae, ullamcorper faucibus nisl. Suspendisse finibus urna vel mi sodales, a pharetra nisl convallis. Phasellus sed turpis non ipsum scelerisque pellentesque at cursus lectus. Nunc ut velit nec odio ultrices sodales.'; class NoPreviewShowHide extends React.Component { constructor(props) { @@ -21,7 +21,7 @@ class NoPreviewShowHide extends React.Component { render() { return ( -

    +

    ); } diff --git a/packages/terra-show-hide/src/ShowHide.jsx b/packages/terra-show-hide/src/ShowHide.jsx index b8804fb7895..a0cb9bf5cd9 100644 --- a/packages/terra-show-hide/src/ShowHide.jsx +++ b/packages/terra-show-hide/src/ShowHide.jsx @@ -9,7 +9,7 @@ import classNames from 'classnames/bind'; import ThemeContext from 'terra-theme-context'; import styles from './ShowHide.module.scss'; import Button from './_ShowHideButton'; -import Paragraph from './_ShowHideParagraph'; +import Focuser from './_ShowHideFocuser'; const cx = classNames.bind(styles); @@ -154,4 +154,4 @@ ShowHide.propTypes = propTypes; ShowHide.defaultProps = defaultProps; export default injectIntl(ShowHide); -export { Paragraph }; +export { Focuser }; diff --git a/packages/terra-show-hide/src/_ShowHideParagraph.jsx b/packages/terra-show-hide/src/_ShowHideFocuser.jsx similarity index 76% rename from packages/terra-show-hide/src/_ShowHideParagraph.jsx rename to packages/terra-show-hide/src/_ShowHideFocuser.jsx index 64020dde2e3..028e2ca0092 100644 --- a/packages/terra-show-hide/src/_ShowHideParagraph.jsx +++ b/packages/terra-show-hide/src/_ShowHideFocuser.jsx @@ -7,13 +7,13 @@ const cx = classNamesBind.bind(styles); const propTypes = { /** - * The main portion of the text that will start with focused text + * Text that precedes the focusable portion. */ - text: PropTypes.string.isRequired, + prefix: PropTypes.string.isRequired, /** - * The portion of the text that will be displayed before the focused text + * The portion of the text that gets focus once the hidden portion is disclosed to be announced by assistive technologies */ - previewText: PropTypes.string, + focusableText: PropTypes.string, }; /** @@ -51,18 +51,19 @@ const truncate = (string) => { /** * This component splits the text with dividing spans to allow the assistive technologies focus on the part of the text */ -const Paragraph = forwardRef((props, ref) => { +const Focuser = forwardRef((props, ref) => { const { - previewText, - text, + prefix, + focusableText, } = props; - const truncatedText = truncate(text); + const truncatedText = truncate(focusableText); const [focusable, setFocusable] = useState(true); return ( <> - {previewText ? addTrailingWhiteSpace(previewText) : null} + {prefix ? addTrailingWhiteSpace(prefix) : null} + {/* this divider starts a new 'line' for JAWS when reading line-by-line */} { > {truncatedText[0]} + {/* this divider ends a line for JAWS when reading line-by-line */} {truncatedText[1] ? addHeadingWhiteSpace(truncatedText[1]) : null} ); }); -Paragraph.propTypes = propTypes; -export default Paragraph; +Focuser.propTypes = propTypes; +export default Focuser; diff --git a/packages/terra-show-hide/tests/jest/ShowHide.test.jsx b/packages/terra-show-hide/tests/jest/ShowHide.test.jsx index 500a175458b..7a631a3c7da 100644 --- a/packages/terra-show-hide/tests/jest/ShowHide.test.jsx +++ b/packages/terra-show-hide/tests/jest/ShowHide.test.jsx @@ -5,6 +5,8 @@ import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider'; import { mountWithIntl } from 'terra-enzyme-intl'; import ShowHide from '../../src/ShowHide'; +jest.mock('uuid', () => ({ v4: () => '00000000-0000-0000-0000-000000000000' })); + describe('ShowHide', () => { // Snapshot Tests it('should render a default show-hide component', () => { diff --git a/packages/terra-show-hide/tests/jest/_ShowHideFocuser.test.jsx b/packages/terra-show-hide/tests/jest/_ShowHideFocuser.test.jsx new file mode 100644 index 00000000000..7b69511f235 --- /dev/null +++ b/packages/terra-show-hide/tests/jest/_ShowHideFocuser.test.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Focuser } from '../../src/ShowHide'; + +describe('Focuser', () => { + const mockPrefix = 'Patients are requesting greater affordability and efficiency in healthcare.'; + const mockFocusableText = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care.'; + // eslint-disable-next-line react/prop-types + const MockComponent = ({ prefix, focusableText }) => { + const ref = React.useRef(null); + return

    ; + }; + + afterEach(() => { + jest.restoreAllMocks(); + }); + + // Snapshot Tests + it('should render divider spans and a span to focus to correctly', () => { + const paragraph = render(); + expect(paragraph).toMatchSnapshot(); + }); + + it('should render preview text correctly', () => { + const paragraph = render(); + expect(paragraph).toMatchSnapshot(); + }); + + it('should render focusable text correctly', () => { + const paragraph = render(); + expect(paragraph).toMatchSnapshot(); + }); + + it('should throw error for required focusableText prop', () => { + try { + shallow(); + } catch (e) { + expect(e.message).toContain('The prop `focusableText` is marked as required'); + } + }); +}); diff --git a/packages/terra-show-hide/tests/jest/_ShowHideParagraph.test.jsx b/packages/terra-show-hide/tests/jest/_ShowHideParagraph.test.jsx deleted file mode 100644 index eabd6e2a569..00000000000 --- a/packages/terra-show-hide/tests/jest/_ShowHideParagraph.test.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { Paragraph } from '../../src/ShowHide'; - -describe('Paragraph', () => { - const mockPreview = 'Patients are requesting greater affordability and efficiency in healthcare.'; - const shortText = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate.'; - const fullText = 'In fact, the U.S. ambulatory surgery center market is expected to see a 6.9 % compound annual growth rate, reaching $33 billion by 2028. (2) Cerner understands the urgency to grow in the ambulatory surgery center market while continuing to deliver excellent care.'; - // eslint-disable-next-line react/prop-types - const MockComponent = ({ previewText, text }) => { - const ref = React.useRef(null); - return

    ; - }; - - afterEach(() => { - jest.restoreAllMocks(); - }); - - // Snapshot Tests - it('should render divider spans and a span to focus to correctly', () => { - const paragraph = render(); - expect(paragraph).toMatchSnapshot(); - }); - - it('should render preview text correctly', () => { - const paragraph = render(); - expect(paragraph).toMatchSnapshot(); - }); - - it('should render short text correctly', () => { - const paragraph = render(); - expect(paragraph).toMatchSnapshot(); - }); - - it('should throw error for required text prop', () => { - try { - shallow(); - } catch (e) { - expect(e.message).toContain('The prop `text` is marked as required'); - } - }); -}); diff --git a/packages/terra-show-hide/tests/jest/__snapshots__/ShowHide.test.jsx.snap b/packages/terra-show-hide/tests/jest/__snapshots__/ShowHide.test.jsx.snap index 2fa12c43e42..dcabd14d6cd 100644 --- a/packages/terra-show-hide/tests/jest/__snapshots__/ShowHide.test.jsx.snap +++ b/packages/terra-show-hide/tests/jest/__snapshots__/ShowHide.test.jsx.snap @@ -87,6 +87,7 @@ exports[`ShowHide correctly applies the theme context className 1`] = `