diff --git a/packages/terra-arrange/CHANGELOG.md b/packages/terra-arrange/CHANGELOG.md index 653c4bfd868..d07df2d8da3 100644 --- a/packages/terra-arrange/CHANGELOG.md +++ b/packages/terra-arrange/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Updated Arrange to use `span` elements instead of `div`. + * Fixed * Fixed reflow issue when zoomed to 400% and the viewport is resized to 320x256 px. diff --git a/packages/terra-arrange/src/Arrange.jsx b/packages/terra-arrange/src/Arrange.jsx index 5ae1c2c2a96..b351468f0dc 100644 --- a/packages/terra-arrange/src/Arrange.jsx +++ b/packages/terra-arrange/src/Arrange.jsx @@ -75,17 +75,17 @@ const Arrange = ({ const fitEndProps = { ...fitEndAttributes }; return ( -
-
+ + {fitStart} -
-
+ + {fill} -
-
+ + {fitEnd} -
-
+ + ); }; diff --git a/packages/terra-arrange/tests/jest/Arrange.test.jsx b/packages/terra-arrange/tests/jest/Arrange.test.jsx index c4b32a83fa5..be7a440f729 100644 --- a/packages/terra-arrange/tests/jest/Arrange.test.jsx +++ b/packages/terra-arrange/tests/jest/Arrange.test.jsx @@ -59,7 +59,7 @@ describe('Arrange', () => { it('should have fit and fill with the default class when align is not set', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit')).toEqual(true); @@ -68,7 +68,7 @@ describe('Arrange', () => { it('should have fit and fill with the required class when fitStart and fill set to top and stretch"', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit center')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit')).toEqual(true); @@ -77,7 +77,7 @@ describe('Arrange', () => { it('should have fit and fill with the required class when fitStart, fitEnd and fill set to stretch, bottom and stretch"', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit stretch')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit bottom')).toEqual(true); @@ -86,7 +86,7 @@ describe('Arrange', () => { it('should have child with the correct class when align is set to stretch', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit stretch')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit stretch')).toEqual(true); @@ -95,7 +95,7 @@ describe('Arrange', () => { it('should have child with the correct class when align is set and overwrites individual fit and fill ', () => { const arrange = ; const wrapper = shallow(arrange); - expect(wrapper.type()).toEqual('div'); + expect(wrapper.type()).toEqual('span'); expect(wrapper.childAt(0).hasClass('fit stretch')).toEqual(true); expect(wrapper.childAt(1).hasClass('fill stretch')).toEqual(true); expect(wrapper.childAt(2).hasClass('fit stretch')).toEqual(true); diff --git a/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap b/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap index 568cda9e8c7..0a06bca48c2 100644 --- a/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap +++ b/packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap @@ -1,65 +1,65 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Arrange default should render a arrange component with given fit and fill 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
-
+ + `; exports[`Arrange should have align prop undefined when align not pass 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange should have all prop set correctly 1`] = ` -
-
-
-
+ FIll text
-
-
+ -
-
+ + `; exports[`Arrange should render a arrange component with given className and id 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to bottom 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to center 1`] = ` -
- + + `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to stretch 1`] = ` -
-
panda -
-
+
FIll text
-
-
+ -
+ `; exports[`Arrange when two fits and one fill is passed with align set should render a arrange component with fit and fill aligned to top 1`] = ` -
- + + `; diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index d37ef4cd9f5..53ddb44c2ec 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,7 +2,12 @@ ## Unreleased +* Changed + * Updated Arrange component example to use `span` element instead of `div`. + * Added + * Added realistic examples for `terra-arrange`. + * Added realistic examples for `terra-toggle-section-header`. * Added email validation for `terra-form-field`. * Updated diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/clinical-lowlight-theme/examplesetup.scss b/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/clinical-lowlight-theme/examplesetup.scss new file mode 100644 index 00000000000..5da645880d9 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/clinical-lowlight-theme/examplesetup.scss @@ -0,0 +1,11 @@ +// stylelint-disable scss/at-mixin-pattern +@import '~terra-mixins/lib/Mixins'; + +.clinical-lowlight-theme { + @include terra-inline-svg-var('--terra-core-docs-arrange-menu-background-image', ''); + @include terra-inline-svg-var('--terra-core-docs-arrange-home-background-image', ''); + @include terra-inline-svg-var('--terra-core-docs-arrange-chat-background-image', ''); + @include terra-inline-svg-var('--terra-core-docs-arrange-settings-background-image', ''); + @include terra-inline-svg-var('--terra-core-docs-arrange-backtotop-background-image', ''); + @include terra-inline-svg-var('--terra-core-docs-arrange-twitter-background-image', ''); +} diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx index 987a44ba35f..a59228a4471 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/arrange/common/examplesetup.jsx @@ -1,19 +1,192 @@ import React from 'react'; +import Button from 'terra-button'; import classNames from 'classnames/bind'; +import uniqueid from 'lodash.uniqueid'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { + KEY_SPACE, VALUE_UP, VALUE_DOWN, VALUE_RIGHT, VALUE_LEFT, +} from 'keycode-js'; import styles from './examplesetup.scss'; const cx = classNames.bind(styles); +const feildSetId = `terra-radio-group-${uniqueid()}`; +const handleHealthSolutionsClick = () => { +// eslint-disable-next-line no-alert + alert('Health solutions button has been clicked'); +}; + +const handleHomeClick = () => { +// eslint-disable-next-line no-alert + alert('Home button has been clicked'); +}; + +const handleMenuClick = () => { +// eslint-disable-next-line no-alert + alert('Menu button has been clicked'); +}; + +const handleSettingsClick = () => { +// eslint-disable-next-line no-alert + alert('Settings button has been clicked'); +}; + +const handleChatClick = () => { +// eslint-disable-next-line no-alert + alert('Chat button has been clicked'); +}; + +const handleTwitterClick = () => { +// eslint-disable-next-line no-alert + alert('Twitter button has been clicked'); +}; + +const handleBacktotopClick = () => { +// eslint-disable-next-line no-alert + alert('Back to top button has been clicked'); +}; + +const handleKeyDown = (event) => { + const radioGroup = document.getElementById(feildSetId); + const radioItems = radioGroup.querySelectorAll('[type=radio]'); + const itemIndex = Array.from(radioItems).indexOf(event.currentTarget); + if (event.key === VALUE_DOWN || event.key === VALUE_RIGHT) { + if (itemIndex === radioItems.length - 1) { + radioItems[0].focus(); + radioItems[0].checked = true; + } else { + radioItems[itemIndex + 1].focus(); + radioItems[itemIndex + 1].checked = true; + } + } else if (event.key === VALUE_UP || event.key === VALUE_LEFT) { + if (itemIndex === 0) { + radioItems[radioItems.length - 1].focus(); + radioItems[radioItems.length - 1].checked = true; + } else { + radioItems[itemIndex - 1].focus(); + radioItems[itemIndex - 1].checked = true; + } + } +}; + +// Prevent scrolling when press space bar key on anchor tag +const handlePreventScroll = (event) => { + if (event.keyCode === KEY_SPACE) { + event.preventDefault(); + } +}; + const ipsum = 'This example provides content containers with a fit (start and/or end region) and fill (middle region). Arrange Props have one required prop which is fill to the content to display in the body of the fill.'; -const simpleText =
{ipsum}
; -const textWithBlueBorder =
{ipsum}
; +const simpleText = {ipsum}; +const textWithBlueBorder = {ipsum}; +const clinicalData = ( + + Clinical data is a staple resource for most health and medical research. Clinical data is either collected during the course of ongoing patient care or as part of a formal clinical trial program. For more information visit  + Clinical information + +); + +const healthSolutionsData = ( + + Trusted clinical technology and evidence-based solutions that drive effective decision-making and outcomes across healthcare. Specialized in clinical effectiveness, research and safety. + + +); + +const consentFormData = ( + <> + A telemedicine consent form is used to confirm that a patient agrees to telemedicine services, which are medical services done remotely over the phone or computer. + + + + + +); + +const textClinicalData = ( + {clinicalData} +); + +const textHealthSolutionsData = ( + {healthSolutionsData} +); + +const textConsentFormData = ( + {consentFormData} +); const alignExampleDiv = ( -
+ ); const alignExampleDivBlue = ( -
+ +); + +const homeButton = ( +
); diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/About.1.doc.mdx index 3341269cfb0..069302fefa2 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/About.1.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/About.1.doc.mdx @@ -10,7 +10,7 @@ import ToggleSectionHeaderPropsTable from 'terra-toggle-section-header/src/Toggl # Terra Toggle Section Header -Toggle section header component that transitions content in and out with a click. +Toggle section header component that transitions content in and out with a click. ## Getting Started @@ -34,6 +34,9 @@ This component requires the following peer dependencies be installed in your app ```jsx import ToggleSectionHeader from 'terra-toggle-section-header'; ``` +## Accessibility + +For accessibility best practices, it is recommended that consumers should always use only one h1 tag per page or view. The one h1 tag should be the page title. A section header should never be a heading level 1. ## Component Features diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/example/AnimatedToggleSectionHeader.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/example/AnimatedToggleSectionHeader.jsx index 9185f0d8431..de2eb9431b4 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/example/AnimatedToggleSectionHeader.jsx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/toggle-section-header/example/AnimatedToggleSectionHeader.jsx @@ -2,13 +2,20 @@ import React from 'react'; import ToggleSectionHeaderExampleTemplate from './ToggleSectionHeaderExampleTemplate'; const componentProps = { - title: 'Animated Example', + title: 'Patient Responsibilities', isAnimated: true, }; const AnimatedToggleSectionHeader = () => ( -

Allergies, also known as allergic diseases, are a number of conditions caused by hypersensitivity of the immune system to typically harmless substances in the environment. These diseases include hay fever, food allergies, atopic dermatitis, allergic asthma, and anaphylaxis. Symptoms may include red eyes, an itchy rash, sneezing, coughing, a runny nose, shortness of breath, or swelling.

+

Respect the rights and treat all healthcare workers and other patients and visitors with dignity. Comply with all hospital policies and guidelines as informed or displayed be available for any appointments made or notify the hospital as early as possible if you are unable to do so. Acknowledge that some other patient medical condition may be more urgent than yours and accept that your doctor may need to attend them first. Kindly cooperate in such situations.

+

Provide us with comprehensive and accurate details about your past medical records and be complaint as regard to taking medication or following any other prescribed treatment. Accept, where applicable, adaptations to the environment to ensure a safe and secure stay in hospital with a full explanation from our staff.

+

+ Strictly follow the + Hospitals Visitors Policy + {' '} + and ccept the measures taken by the hospital to ensure personal privacy and confidentiality of medical records. +

); diff --git a/packages/terra-icon/CHANGELOG.md b/packages/terra-icon/CHANGELOG.md index 150f1635d2a..bba3d1ea1ab 100644 --- a/packages/terra-icon/CHANGELOG.md +++ b/packages/terra-icon/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Changed the order of imports in parseSvg and renderJsx files. + ## 3.54.0 - (April 27, 2023) * Changed diff --git a/packages/terra-icon/scripts/src/generate-icons/parseSvg.js b/packages/terra-icon/scripts/src/generate-icons/parseSvg.js index 334b896d89c..5303990eb74 100644 --- a/packages/terra-icon/scripts/src/generate-icons/parseSvg.js +++ b/packages/terra-icon/scripts/src/generate-icons/parseSvg.js @@ -1,7 +1,7 @@ /* eslint-disable import/no-extraneous-dependencies, compat/compat */ -import { JSDOM } from 'jsdom'; -import fs from 'fs'; import path from 'path'; +import fs from 'fs'; +import { JSDOM } from 'jsdom'; import Icon from './Icon'; /* eslint-enable import/no-extraneous-dependencies */ diff --git a/packages/terra-icon/scripts/src/generate-icons/renderJsx.js b/packages/terra-icon/scripts/src/generate-icons/renderJsx.js index 55ef723ec21..09c38b89104 100644 --- a/packages/terra-icon/scripts/src/generate-icons/renderJsx.js +++ b/packages/terra-icon/scripts/src/generate-icons/renderJsx.js @@ -1,7 +1,7 @@ /* eslint-disable import/no-extraneous-dependencies, compat/compat */ -import template from 'lodash/template'; import fs from 'fs'; import path from 'path'; +import template from 'lodash/template'; import ReactIcon from './ReactIcon'; import iconData from '../../../src/icon-data.json'; /* eslint-enable import/no-extraneous-dependencies */ diff --git a/packages/terra-section-header/CHANGELOG.md b/packages/terra-section-header/CHANGELOG.md index 200f25b9d96..676130b3b15 100644 --- a/packages/terra-section-header/CHANGELOG.md +++ b/packages/terra-section-header/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Updated SectionHeader to use `span` & `button` elements instead of `div`. + ## 2.60.0 - (April 5, 2023) * Changed diff --git a/packages/terra-section-header/src/SectionHeader.jsx b/packages/terra-section-header/src/SectionHeader.jsx index 28e2ad3229f..ff7a36ca963 100644 --- a/packages/terra-section-header/src/SectionHeader.jsx +++ b/packages/terra-section-header/src/SectionHeader.jsx @@ -119,9 +119,9 @@ class SectionHeader extends React.Component { ]); const accordionIcon = ( -
+ -
+ ); const sectionHeaderClassNames = classNames( @@ -153,17 +153,20 @@ class SectionHeader extends React.Component { /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ - const buttonAttributes = (onClick) ? { role: 'button', 'aria-expanded': isOpen, 'aria-label': headerText } : undefined; + const buttonAttributes = (onClick && accordionIcon) ? { + type: 'button', tabIndex: '-1', 'aria-expanded': isOpen, 'aria-label': headerText, + } : undefined; + const ArrangeWrapper = onClick && accordionIcon ? 'button' : 'span'; return ( -
+ {headerText}} className={cx('title-arrange')} /> -
+ ); diff --git a/packages/terra-section-header/src/SectionHeader.module.scss b/packages/terra-section-header/src/SectionHeader.module.scss index f0d2bcd524d..935239c1d79 100644 --- a/packages/terra-section-header/src/SectionHeader.module.scss +++ b/packages/terra-section-header/src/SectionHeader.module.scss @@ -99,6 +99,16 @@ color: var(--terra-section-header-transparent-active-color, #1c1f21); } } + + button { + background: none; + border: 0; + color: inherit; + cursor: pointer; + font-family: var(--terra-section-header-font-family, 'Helvetica Neue', Helvetica, Arial, sans-serif); + padding: 0; + text-align: left; + } } .title-arrange { @@ -119,6 +129,7 @@ @include terra-margin-end(var(--terra-section-header-accordion-icon-margin-end, 0.38rem)); @include terra-padding-start(var(--terra-section-header-accordion-icon-padding-start, 0)); @include terra-padding-end(var(--terra-section-header-accordion-icon-padding-end, 0)); + display: inline-flex; padding-bottom: var(--terra-section-header-accordion-icon-padding-bottom, 0); padding-top: var(--terra-section-header-accordion-icon-padding-top, 0.38rem); } @@ -127,9 +138,10 @@ background: var(--terra-section-header-accordion-icon-background, inline-svg('')); background-repeat: no-repeat; background-size: contain; - display: block; + display: inline-block; height: var(--terra-section-header-accordion-icon-height, 0.83593rem); transform: rotate(0deg); + vertical-align: middle; width: var(--terra-section-header-accordion-icon-width, 0.83593rem); // flips the icon about its vertical axis, presenting it in its mirrored-image form diff --git a/packages/terra-section-header/src/clinical-lowlight-theme/SectionHeader.module.scss b/packages/terra-section-header/src/clinical-lowlight-theme/SectionHeader.module.scss index 7f562e383d0..82b2c61d79c 100644 --- a/packages/terra-section-header/src/clinical-lowlight-theme/SectionHeader.module.scss +++ b/packages/terra-section-header/src/clinical-lowlight-theme/SectionHeader.module.scss @@ -77,6 +77,7 @@ --terra-section-header-accordion-icon-padding-top: 0.38rem; --terra-section-header-accordion-icon-height: 0.83593rem; --terra-section-header-accordion-icon-width: 0.83593rem; + --terra-section-header-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; // accordion icon @include terra-inline-svg-var('--terra-section-header-accordion-icon-background', ''); diff --git a/packages/terra-section-header/src/orion-fusion-theme/SectionHeader.module.scss b/packages/terra-section-header/src/orion-fusion-theme/SectionHeader.module.scss index 6b7d7a5af77..f1e4c669789 100644 --- a/packages/terra-section-header/src/orion-fusion-theme/SectionHeader.module.scss +++ b/packages/terra-section-header/src/orion-fusion-theme/SectionHeader.module.scss @@ -77,7 +77,8 @@ --terra-section-header-accordion-icon-padding-top: 0.33333rem; --terra-section-header-accordion-icon-height: 0.66667rem; --terra-section-header-accordion-icon-width: 0.66667rem; - + --terra-section-header-font-family: Tahoma, 'Geneva', Verdana, 'Trebuchet MS', sans-serif; + // accordion icon @include terra-inline-svg-var('--terra-section-header-accordion-icon-background', ''); } diff --git a/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap b/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap index f47df8b4429..4e1cff335dc 100644 --- a/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap +++ b/packages/terra-section-header/tests/jest/__snapshots__/SectionHeader.test.jsx.snap @@ -17,9 +17,8 @@ exports[`SectionHeader correctly applies the theme context className 1`] = ` aria-label="foo" className="section-header orion-fusion-theme" > -
} > -
-
-
foo -
-
+ -
+ -
+ @@ -64,9 +63,8 @@ exports[`SectionHeader should render a default component 1`] = ` aria-label="foo" className="section-header" > -
} /> -
+ `; @@ -88,29 +86,29 @@ exports[`SectionHeader should render with an accordion icon in the open position class="section-header is-interactable" tabindex="0" > -
-
-
-
-
-
-
+ + -
-
+ -
-
+ + `; @@ -132,29 +130,29 @@ exports[`SectionHeader should render with an accordion icon when an 'onClick()' class="section-header is-interactable" tabindex="0" > -