Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
[terra-arrange][terra-section-header] update to utilize semantic html…
Browse files Browse the repository at this point in the history 
… elements (#3831)

Co-authored-by: ST063655 <ST063655@cerner.net>
  • Loading branch information
@KV106606Viswanath
2 people authored and Shalini committed Aug 8, 2023
1 parent 49e3511 commit 2c88483
Show file tree
Hide file tree
Showing 33 changed files with 534 additions and 225 deletions.
3 changes: 3 additions & 0 deletions packages/terra-arrange/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
16 changes: 8 additions & 8 deletions packages/terra-arrange/src/Arrange.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,17 +75,17 @@ const Arrange = ({
const fitEndProps = { ...fitEndAttributes };

return (
<div {...customProps} className={cx('arrange', customProps.className)}>
<div {...fitStartProps} className={cx('fit', align || alignFitStart, fitStartProps.className)}>
<span {...customProps} className={cx('arrange', customProps.className)}>
<span {...fitStartProps} className={cx('fit', align || alignFitStart, fitStartProps.className, 'fit-block')}>
{fitStart}
</div>
<div {...fillProps} className={cx('fill', align || alignFill, fillProps.className)}>
</span>
<span {...fillProps} className={cx('fill', align || alignFill, fillProps.className, 'fill-block')}>
{fill}
</div>
<div {...fitEndProps} className={cx('fit', align || alignFitEnd, fitEndProps.className)}>
</span>
<span {...fitEndProps} className={cx('fit', align || alignFitEnd, fitEndProps.className)}>
{fitEnd}
</div>
</div>
</span>
</span>
);
};

Expand Down
10 changes: 5 additions & 5 deletions packages/terra-arrange/tests/jest/Arrange.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ describe('Arrange', () => {
it('should have fit and fill with the default class when align is not set', () => {
const arrange = <Arrange fitStart={fitStart} fitEnd={fitEnd} fill={fill} />;
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);
Expand All @@ -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 = <Arrange fitStart={fitStart} fitEnd={fitEnd} fill={fill} alignFitStart="center" alignFill="stretch" />;
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);
Expand All @@ -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 = <Arrange fitStart={fitStart} fitEnd={fitEnd} fill={fill} alignFitStart="stretch" alignFill="stretch" alignFitEnd="bottom" />;
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);
Expand All @@ -86,7 +86,7 @@ describe('Arrange', () => {
it('should have child with the correct class when align is set to stretch', () => {
const arrange = <Arrange fitStart={fitStart} fitEnd={fitEnd} fill={fill} align="stretch" />;
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);
Expand All @@ -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 = <Arrange fitStart={fitStart} fitEnd={fitEnd} fill={fill} align="stretch" alignFitStart="center" />;
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);
Expand Down
148 changes: 74 additions & 74 deletions packages/terra-arrange/tests/jest/__snapshots__/Arrange.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -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`] = `
<div
<span
className="arrange"
>
<div
className="fit"
<span
className="fit fit-block"
>
<img
alt="panda"
src="http:///uploads/2016/09/telegraph-1.jpg"
/>
</div>
<div
className="fill"
</span>
<span
className="fill fill-block"
>
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit"
>
<a
href="http://www.example.com"
/>
</div>
</div>
</span>
</span>
`;

exports[`Arrange should have align prop undefined when align not pass 1`] = `
<div
<span
className="arrange"
>
<div
className="fit"
<span
className="fit fit-block"
>
<img
alt="panda"
src="http:///uploads/2016/09/telegraph-1.jpg"
/>
</div>
<div
className="fill"
</span>
<span
className="fill fill-block"
>
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit"
/>
</div>
</span>
`;

exports[`Arrange should have all prop set correctly 1`] = `
<div
<span
className="arrange"
>
<div
className="fit center"
<span
className="fit center fit-block"
style={
Object {
"maxWidth": "10px",
Expand All @@ -70,9 +70,9 @@ exports[`Arrange should have all prop set correctly 1`] = `
alt="panda"
src="http:///uploads/2016/09/telegraph-1.jpg"
/>
</div>
<div
className="fill center"
</span>
<span
className="fill center fill-block"
style={
Object {
"maxWidth": "20px",
Expand All @@ -82,8 +82,8 @@ exports[`Arrange should have all prop set correctly 1`] = `
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit center"
style={
Object {
Expand All @@ -94,130 +94,130 @@ exports[`Arrange should have all prop set correctly 1`] = `
<a
href="http://www.example.com"
/>
</div>
</div>
</span>
</span>
`;

exports[`Arrange should render a arrange component with given className and id 1`] = `
<div
<span
className="arrange testA testB testC"
id="testkey"
>
<div
className="fit"
<span
className="fit fit-block"
>
<img
alt="panda"
src="http:///uploads/2016/09/telegraph-1.jpg"
/>
</div>
<div
className="fill"
</span>
<span
className="fill fill-block"
>
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit"
/>
</div>
</span>
`;

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`] = `
<div
<span
className="arrange"
>
<div
className="fit bottom"
<span
className="fit bottom fit-block"
>
<img
alt="panda"
src="http:///uploads/2016/09/telegraph-1.jpg"
/>
</div>
<div
className="fill bottom"
</span>
<span
className="fill bottom fill-block"
>
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit bottom"
/>
</div>
</span>
`;

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`] = `
<div
<span
className="arrange"
>
<div
className="fit center"
<span
className="fit center fit-block"
/>
<div
className="fill center"
<span
className="fill center fill-block"
>
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit center"
>
<a
href="http://www.example.com"
/>
</div>
</div>
</span>
</span>
`;

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`] = `
<div
<span
className="arrange"
>
<div
className="fit stretch"
<span
className="fit stretch fit-block"
>
<img
alt="panda"
src="http:///uploads/2016/09/telegraph-1.jpg"
/>
</div>
<div
className="fill stretch"
</span>
<span
className="fill stretch fill-block"
>
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit stretch"
/>
</div>
</span>
`;

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`] = `
<div
<span
className="arrange"
>
<div
className="fit"
<span
className="fit fit-block"
/>
<div
className="fill"
<span
className="fill fill-block"
>
<div>
FIll text
</div>
</div>
<div
</span>
<span
className="fit"
>
<a
href="http://www.example.com"
/>
</div>
</div>
</span>
</span>
`;
5 changes: 5 additions & 0 deletions packages/terra-core-docs/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
11 changes: 11 additions & 0 deletions ...core-docs/src/terra-dev-site/doc/arrange/common/clinical-lowlight-theme/examplesetup.scss
View file
Original file line number Diff line number Diff line change
@@ -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', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#c5c5c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>');
@include terra-inline-svg-var('--terra-core-docs-arrange-home-background-image', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#c5c5c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9"/><path d="M9 22V12h6v10M2 10.6L12 2l10 8.6"/></svg>');
@include terra-inline-svg-var('--terra-core-docs-arrange-chat-background-image', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#c5c5c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>');
@include terra-inline-svg-var('--terra-core-docs-arrange-settings-background-image', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#c5c5c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>');
@include terra-inline-svg-var('--terra-core-docs-arrange-backtotop-background-image', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#c5c5c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V6M5 12l7-7 7 7"/></svg>');
@include terra-inline-svg-var('--terra-core-docs-arrange-twitter-background-image', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#c5c5c6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>');
}
Loading

0 comments on commit 2c88483

Please sign in to comment.