- {displayGroups.map((displayRow, rowIndex) => {
- const row = renderRow(displayRow, rowIndex, displayGroups.length, emphasis);
- return row;
- })}
-
- );
- }
- } else {
- while (displaysSlice.length) {
- primaryColumn.push(displaysSlice.splice(0, 1));
- }
+ if (!trueColumn) { return renderByRowView(displaysSlice, emphasis, overrideDefaultStyling); }
- displayGroups.push(primaryColumn);
+ const displayGroups = twoColumnGrouping(displaysSlice);
+
+ return (
+
- {displayGroups.map((group, index) => {
- const column = renderColumn(group, index, emphasis, overrideDefaultStyling);
- return column;
- })}
+
+ {renderColumn(displaysSlice, emphasis, overrideDefaultStyling)}
);
};
diff --git a/packages/terra-clinical-item-view/src/ItemView.module.scss b/packages/terra-clinical-item-view/src/ItemView.module.scss
index 53ce8065a..cb2536f0e 100644
--- a/packages/terra-clinical-item-view/src/ItemView.module.scss
+++ b/packages/terra-clinical-item-view/src/ItemView.module.scss
@@ -55,15 +55,55 @@
overflow: hidden; // VERY IMPORTANT FOR IE10
}
- .column-container {
+ .content {
+ align-items: flex-start;
+ display: flex;
+ overflow: hidden; // VERY IMPORTANT FOR IE10
+ }
+
+ .single-result-column-container {
display: flex;
flex-flow: row nowrap;
}
- .content {
- align-items: flex-start;
+ .column-list-container {
display: flex;
- overflow: hidden; // VERY IMPORTANT FOR IE10
+ list-style-type: none;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding-left: 0;
+ }
+
+ .column-list {
+ display: flex;
+ flex-flow: column nowrap;
+ list-style-type: none;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding-left: 0;
+ }
+
+ .row-list-container {
+ display: flex;
+ flex-flow: row wrap;
+ list-style-type: none;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding-left: 0;
+ }
+
+ .row {
+ display: flex;
+ width: 100%;
+ }
+
+ .row-list {
+ display: flex;
+ list-style-type: none;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding-left: 0;
+ width: 100%;
}
.secondary-column {
@@ -78,31 +118,30 @@
}
}
- .row {
- display: flex;
- width: 100%;
- }
-
.is-truncated,
.is-truncated [data-terra-clinical-item-display-text] {
@include terra-clinical-text-truncate;
}
// Layouts
- /* stylelint-disable selector-max-compound-selectors */
.one-column {
- .primary-column {
- width: 100%;
+ .column-list-container {
+ flex-flow: column nowrap;
}
}
- /* stylelint-enable selector-max-compound-selectors */
+ /* stylelint-disable selector-max-compound-selectors */
.two-columns {
- .primary-column {
- flex: 1 1 auto;
- float: left;
+ .column-list-container {
+ flex-flow: row nowrap;
+
+ .primary-column {
+ flex: 1 1 auto;
+ float: left;
+ }
}
}
+ /* stylelint-enable selector-max-compound-selectors */
.two-columns-by-row {
.content:nth-child(odd) {
diff --git a/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx b/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx
index bc5df38d3..58c5c010c 100644
--- a/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx
+++ b/packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx
@@ -1,4 +1,5 @@
import { Badge } from 'terra-clinical-item-view/package.json?dev-site-package';
+import { Notice } from "@cerner/terra-docs";
import ItemViewStandard from '../example/ItemViewStandard?dev-site-example';
import ItemViewTwoColumn from '../example/ItemViewTwoColumn?dev-site-example';
@@ -8,6 +9,8 @@ import ItemViewComment from '../example/ItemViewComment?dev-site-example';
import ItemViewAll from '../example/ItemViewAll?dev-site-example';
import ItemViewAllTopAligned from '../example/ItemViewAllTopAligned?dev-site-example';
import ItemViewOverrideDefaultStyling from '../example/ItemViewOverrideDefaultStyling?dev-site-example';
+import ItemViewWithHeader from '../example/ItemViewWithHeader?dev-site-example';
+import ItemViewTwoColumnWithHeader from '../example/ItemViewTwoColumnWithHeader?dev-site-example';
import ItemViewProps from 'terra-clinical-item-view/src/ItemView.jsx?dev-site-props-table';
@@ -32,6 +35,57 @@ import ItemView from 'terra-clinical-item-view';
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
+## Accessibility
+
+
+
+#### Accessibility Guidance: Headers
+
+For the purposes of accessibility compliance, it is **strongly** suggested to include a header element directly above
+the Clinical Item View during implementation. This ensures that the list of displays in the view have proper context.
+**The header not only acts as the main label for what the view contains, but also helps with page navigation.**
+
+Consumers can use the Terra Core Heading component found [here](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/heading/about)
+or the Clincial Header component found [here](https://engineering.cerner.com/terra-clinical/components/terra-clinical-header/clinical-header/clinical-header).
+Refer to A11y standards for how to properly implement headings in the context of your webpage. Further information can be found on the Clinical Item View accessibility guide.
+
+The following are two examples of how to implement a header for the one column and two column layouts.
+
+
+
+
+
+
+
+
+#### Accessibility Guidance: Truncated Text
+
+Truncation of text can pose an accessibility concern if no method of disclosing the full text is available
+to the user. When using `isTruncated`, consumers are responsible for providing a progressive disclosure pattern
+ to disclose the full Item Display text in order to ensure that it is accessible for keyboard navigation users.
+
+**There should always be a method of accessing the truncated information. If there is no way to progressively
+disclose the full content of the truncated information, then truncation should not be used.**
+
+Some examples of progressive disclosure patterns that may be used to disclose truncated information include:
+- Accordions
+- Dialogs
+- Popovers
+- Show/Hide
+- Split Views
+- Toasts
+
+The method of disclosure **must** be accessible via keyboard interactions.
+
+Truncation should be avoided where it is not necessary. Certain content should **never** be truncated (i.e.
+medication names and dosages in menus where the user is selecting from a list of choices).
+
+
+
## Examples
} iconAlignment="inline" text="display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text" key="123" />;
+
+const views = () => (
+
+
One Column - Single Display
+
When there is only one display we return it without putting it into an unordered list and returning it as a list item.
+
+
+);
+
+export default views;
diff --git a/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx b/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx
index fdbdfe21d..ad09b80b9 100644
--- a/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx
+++ b/packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx
@@ -246,6 +246,39 @@ it('should render two columns with 8 displays when trueColumn is false', () => {
expect(itemView).toMatchSnapshot();
});
+it('should render a singular display not in an unordered list', () => {
+ const display1 = shallowWithIntl(
);
+ const displays = [display1];
+ const itemView = shallow(
);
+ expect(itemView.find('ItemDisplay')).toHaveLength(1);
+ expect(itemView.find('div.single-result-column-container')).toHaveLength(1);
+ expect(itemView.find('ul.column-list-container')).toHaveLength(0);
+ expect(itemView).toMatchSnapshot();
+});
+
+it('should render several displays in an unordered list for one column layout', () => {
+ const display1 = shallowWithIntl(
);
+ const display2 = shallowWithIntl(
);
+ const display3 = shallowWithIntl(
);
+ const displays = [display1, display2, display3];
+ const itemView = shallow(
);
+ expect(itemView.find('ItemDisplay')).toHaveLength(3);
+ expect(itemView.find('ul.column-list-container')).toHaveLength(1);
+ expect(itemView).toMatchSnapshot();
+});
+
+it('should render each column as an unordered list within a primary unordered list for two column layout', () => {
+ const display1 = shallowWithIntl(
);
+ const display2 = shallowWithIntl(
);
+ const display3 = shallowWithIntl(
);
+ const displays = [display1, display2, display3];
+ const itemView = shallow(
);
+ expect(itemView.find('ItemDisplay')).toHaveLength(3);
+ expect(itemView.find('ul.column-list-container')).toHaveLength(1);
+ expect(itemView.find('ul.column-list')).toHaveLength(2);
+ expect(itemView).toMatchSnapshot();
+});
+
it('correctly applies the theme context className', () => {
jest.spyOn(React, 'useContext')
.mockReturnValue({
diff --git a/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap b/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap
index f4c158e89..a7a6727fc 100644
--- a/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap
+++ b/packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap
@@ -18,51 +18,45 @@ exports[`should render 1 start theme display 1`] = `
className="body"
>
-
-
-
+ }
+ isDisabled={false}
+ isTruncated={false}
+ text="display 1"
+ textStyle="primary"
+ />
-
-
-
+
-
-
+
+
+
-
+ isDisabled={false}
+ isTruncated={false}
+ text="display 2"
+ textStyle="primary"
+ />
+
+
@@ -174,130 +167,129 @@ exports[`should render 3 start theme displays 1`] = `
-
-
-
+
-
-
+
+
+
-
-
-
+
+
+
-
+ isDisabled={false}
+ isTruncated={false}
+ text="display 3"
+ textStyle="primary"
+ />
+
+
@@ -357,6 +349,59 @@ exports[`should render a default component 1`] = `
`;
+exports[`should render a singular display not in an unordered list 1`] = `
+
+`;
+
exports[`should render a start accessory 1`] = `
-
-
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+`;
+
+exports[`should render each column as an unordered list within a primary unordered list for two column layout 1`] = `
+
+
+
+
-
-
-
-
+
-
+
+
+ -
+
+
+
+
+ -
-
-
-
+
-
+
+
+
+
+
+
+
+
+`;
+
+exports[`should render one column 1`] = `
+
+
+
+
-
-
+
+
+
-
+ isDisabled={false}
+ isTruncated={false}
+ text="display 2"
+ textStyle="primary"
+ />
+
+
`;
-exports[`should render one column 1`] = `
+exports[`should render several displays in an unordered list for one column layout 1`] = `
-
-
-
+
-
-
+
+
+
-
+ isDisabled={false}
+ isTruncated={false}
+ text="display 2"
+ textStyle="primary"
+ />
+
+
+
+
+
@@ -720,51 +1053,45 @@ exports[`should render truncated display 1`] = `
className="body"
>
-
-
-
+ }
+ isDisabled={false}
+ isTruncated={false}
+ text="display1display1display1display1display1display1display1display1"
+ textStyle="primary"
+ />
@@ -779,51 +1106,45 @@ exports[`should render truncated display when isTruncated is only set on the dis
className="body"
>
-
-
-
+ }
+ isDisabled={false}
+ isTruncated={true}
+ text="display1display1display1display1display1display1display1display1"
+ textStyle="primary"
+ />
@@ -837,36 +1158,48 @@ exports[`should render truncated two column displays when isTruncated is only se