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

[terra-arrange][terra-section-header] update to utilize semantic html elements #3831

Merged
merged 31 commits into from
Aug 1, 2023
Merged

[terra-arrange][terra-section-header] update to utilize semantic html elements #3831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
9fd4c4a
Adding valid html for toggle section header
KV106606Viswanath Jun 26, 2023
879df39
Updated Arrange and Section header Changelog files
KV106606Viswanath Jun 26, 2023
9ef2aa9
Resolved lint errors
KV106606Viswanath Jun 26, 2023
fb39b7d
Resolved scss lint errors
KV106606Viswanath Jun 26, 2023
8398025
Updated jest snapshots
KV106606Viswanath Jun 27, 2023
275acd4
Updated Section header and toggle section header jest snapshots
KV106606Viswanath Jun 27, 2023
d020c54
Updated scss files
KV106606Viswanath Jun 28, 2023
4494186
Arrange example updates
KV106606Viswanath Jul 7, 2023
332c513
Section header Jest snapshot updates
KV106606Viswanath Jul 7, 2023
047e0a9
Section header code updates
KV106606Viswanath Jul 10, 2023
77deb77
Terra core docs change log updates
KV106606Viswanath Jul 10, 2023
686e393
Implementation page H level text updates
KV106606Viswanath Jul 10, 2023
e7ad2d7
Section Header jest snapshot updates
KV106606Viswanath Jul 10, 2023
839e552
Toggle Section header jest snapshot updates
KV106606Viswanath Jul 10, 2023
29e2db2
Section header code updates
KV106606Viswanath Jul 11, 2023
21c690e
Added Accessibility section
KV106606Viswanath Jul 12, 2023
682292d
Terra core docs changelog updates
KV106606Viswanath Jul 13, 2023
70276c1
Changelog file updates
KV106606Viswanath Jul 13, 2023
f4fceda
Added realistic examples for Toggle section header and Terra Arrange
KV106606Viswanath Jul 17, 2023
c0fd321
Resolved js lint errors
KV106606Viswanath Jul 17, 2023
e7abe72
Section header code changes
KV106606Viswanath Jul 18, 2023
d4ffd98
Added tooltip, dotted border for buttons
KV106606Viswanath Jul 21, 2023
ae58b44
Fixed radio button cyclic behaviour issue on safari browser
KV106606Viswanath Jul 25, 2023
d626eb5
Removed unnecessary class names in section header
KV106606Viswanath Jul 26, 2023
697b00c
Jest snapshot updates
KV106606Viswanath Jul 26, 2023
108ae1b
Removing aria label for Icon buttons as SR reading button name twice
KV106606Viswanath Jul 27, 2023
878229e
Fix for WDIO Issue.
Jul 28, 2023
3a5fb39
Added function to prevent scroll of anchor tag
KV106606Viswanath Jul 28, 2023
0a88d98
Updated import values
KV106606Viswanath Jul 28, 2023
95b4603
Changed order of the imports in parseSvg file
KV106606Viswanath Jul 28, 2023
fd603a4
Changed the order of imports in terra icon
KV106606Viswanath Jul 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-arrange/CHANGELOG.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you rebase with main so that this file is up to date?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated

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
Open in desktop
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 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need lowlight-theme file here ..??

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The interactive elements which i added like home, menu and settings button etc are in black colour. These buttons are not visible when i switched to clinical theme. For that i have added clinical theme scss file and added svg icons with white color.

@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
Loading