diff --git a/packages/terra-clinical-item-view/CHANGELOG.md b/packages/terra-clinical-item-view/CHANGELOG.md index 6148ec33c..87eba1629 100644 --- a/packages/terra-clinical-item-view/CHANGELOG.md +++ b/packages/terra-clinical-item-view/CHANGELOG.md @@ -10,6 +10,9 @@ * Changed * Minor dependency version bump +* Changed + * Changed displays to exist in an unordered list as list items. + ## 4.10.0 - (August 16, 2023) * Changed diff --git a/packages/terra-clinical-item-view/package.json b/packages/terra-clinical-item-view/package.json index 20ad1f946..aa70008ad 100644 --- a/packages/terra-clinical-item-view/package.json +++ b/packages/terra-clinical-item-view/package.json @@ -30,6 +30,7 @@ "classnames": "^2.2.5", "prop-types": "^15.5.8", "terra-clinical-item-display": "^4.10.0", + "terra-heading": "^4.52.0", "terra-icon": "^3.0.0", "terra-mixins": "^1.0.0", "terra-theme-context": "^1.0.0" diff --git a/packages/terra-clinical-item-view/src/ItemView.jsx b/packages/terra-clinical-item-view/src/ItemView.jsx index a4fd58037..de94c06ab 100644 --- a/packages/terra-clinical-item-view/src/ItemView.jsx +++ b/packages/terra-clinical-item-view/src/ItemView.jsx @@ -148,6 +148,110 @@ const classesForContent = (rowIndex, rowCount, contentIndex, emphasis) => { return ['content'].concat(classes); }; +const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling) => { + const rowKey = rowIndex; + + return ( +
  • + +
    • + ); +}; + +const renderTwoColumns = (displayGroup, displayGroupIndex, emphasis, overrideDefaultStyling) => { + const columnKey = displayGroupIndex; + const displayCount = displayGroup.length; + const containerStyling = displayGroupIndex === 0 ? 'primary-column' : 'secondary-column'; + + return ( +
  • + +
    • + ); +}; + +const renderColumn = (displays, emphasis, overrideDefaultStyling) => { + const displayCount = displays.length; + + return ( +
    + +
    + ); +}; + +const renderByRowView = (displays, emphasis, overrideDefaultStyling) => { + const displayGroups = []; + + while (displays.length) { + displayGroups.push(displays.splice(0, 2)); + } + + return ( +
    + +
    + ); +}; + +const renderSingleDisplayView = (singleDisplay, overrideDefaultStyling) => { + /** + * Since this is always a singular display, the content styling will be the primary defaults if they are not overridden. + * We don't have to call into the classesForContent method and instead can just set the primary size and color here. + */ + const contentClass = overrideDefaultStyling ? 'content' : ['content', 'content-primary-size', 'content-primary-color']; + + return ( +
    +
    + {singleDisplay} +
    +
    + ); +}; + const twoColumnGrouping = (displays) => { let count = 0; const displayGroups = []; @@ -170,97 +274,39 @@ const twoColumnGrouping = (displays) => { return displayGroups; }; -const renderRow = (row, rowIndex, rowCount, emphasis) => { - const rowKey = rowIndex; - return ( -
    - {row.map((display, displayIndex) => { - const displayKey = displayIndex; - const contentClasses = classesForContent(rowIndex, rowCount, displayIndex, emphasis); - - return ( -
    - {display} -
    - ); - })} -
    - ); -}; - -const renderColumn = (displayGroup, displayGroupIndex, emphasis, overrideDefaultStyling) => { - const columnKey = displayGroupIndex; - const displayCount = displayGroup.length; - let containerStyling; - - if (displayGroupIndex === 0) { - containerStyling = 'primary-column'; - } else { - containerStyling = 'secondary-column'; - } - - return ( -
    - {displayGroup.map((display, contentIndex) => { - const contentKey = contentIndex; - let contentClasses; - - if (overrideDefaultStyling) { - contentClasses = 'content'; - } else { - contentClasses = classesForContent(contentIndex, displayCount, displayGroupIndex, emphasis); - } - - return ( -
    - {display} -
    - ); - })} -
    - ); -}; - const renderView = (displays, layout, emphasis, overrideDefaultStyling, trueColumn) => { if (displays === null || displays === undefined || !displays.length) { return undefined; } - let displayGroups = []; const displaysSlice = displays.slice(0, 8); - const primaryColumn = []; + + /** + * If there is only one display we don't want to return it as an item in a list. + * The method renderSingleDisplayView here takes in the single display and returns it within simple divs instead. + */ + if (displaysSlice.length === 1) { return renderSingleDisplayView(displaysSlice, overrideDefaultStyling); } if (layout === Layouts.TWO_COLUMNS) { - if (trueColumn) { - displayGroups = twoColumnGrouping(displaysSlice); - } else { - while (displaysSlice.length) { - displayGroups.push(displaysSlice.splice(0, 2)); - } - - return ( -
    - {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 ( +
    + +
    + ); } 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="Asif Khan" />; +const display2 = } iconAlignment="inline" text="Care Position: Primary" />; +const display3 = ; +const display4 = ; +const display5 = ; +const display6 = ; +const displays = [display1, display2, display3, display4, display5, display6]; + +export default () => ( +
    + Patient Information + +
    +); diff --git a/packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewWithHeader.jsx b/packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewWithHeader.jsx new file mode 100644 index 000000000..cc0ae27a9 --- /dev/null +++ b/packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewWithHeader.jsx @@ -0,0 +1,19 @@ +import React from 'react'; +import Heading from 'terra-heading'; +import IconPerson from 'terra-icon/lib/icon/IconPerson'; +import ItemView from 'terra-clinical-item-view'; + +const display1 = } iconAlignment="inline" text="Asif Khan" />; +const display2 = ; +const display3 = ; +const display4 = ; +const display5 = ; +const display6 = ; +const displays = [display1, display2, display3, display4, display5, display6]; + +export default () => ( +
    + Patient Information + +
    +); diff --git a/packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/SingleDisplayItemView.test.jsx b/packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/SingleDisplayItemView.test.jsx new file mode 100644 index 000000000..bc5b960a3 --- /dev/null +++ b/packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/SingleDisplayItemView.test.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import IconAlert from 'terra-icon/lib/icon/IconAlert'; +import ItemView from '../../../ItemView'; + +const display1 = } 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..694a8f092 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" + />
    @@ -76,91 +70,90 @@ exports[`should render 2 start theme displays 1`] = `
    -
    -
    -
    +
    +
      - + -
    -
    - + +
  • + -
    • + 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
    -
    -
    +
      -
      - -
      -
    -
    -
    +
  • + +
    • + + +
  • - -
    • -
    + + +
    @@ -879,331 +1212,343 @@ exports[`should render two columns with 8 displays 1`] = `
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    +
      -
      - -
      -
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    + +
  • - -
    • -
    - -
    -
    - -
    -
    + + +
    @@ -1216,341 +1561,363 @@ exports[`should render two columns with 8 displays when trueColumn is false 1`]
    -
    -
    -
    - -
    -
    - -
    -
    -
    +
      -
      - -
      -
      - -
      -
    -
    -
    - -
    -
    +
  • + +
    • +
  • + +
    • + + +
  • - -
    • -
    -
    -
    +
  • + +
    • +
  • + +
    • + + +
  • - -
    • -
    +
  • + +
    • +
  • + +
    • + + +
  • - -
    • -
    + + +
    @@ -1563,136 +1930,148 @@ exports[`should render two columns with an odd number of displays 1`] = `
    -
    -
    +
      -
      - -
      -
      +
    • + +
      • +
    • + +
      • +
    + +
  • - -
    • -
    -
    -
    - -
    -
    + + +
    @@ -1706,51 +2085,45 @@ exports[`should render with 1 display 1`] = ` className="body" >
    -
    - -
    + } + isDisabled={false} + isTruncated={false} + text="display 1" + textStyle="primary" + />
    @@ -1764,91 +2137,90 @@ exports[`should render with 2 displays 1`] = `
    -
    -
    -
    +
    +
      - + -
    -
    - + +
  • + -
    • + isDisabled={false} + isTruncated={false} + text="display 2" + textStyle="primary" + /> + +
    @@ -1862,130 +2234,129 @@ exports[`should render with 3 displays 1`] = `
    -
    -
    -
    +
    +
      - + -
    -
    - + +
  • + -
    • -
    - + +
  • + -
    • + isDisabled={false} + isTruncated={false} + text="display 3" + textStyle="primary" + /> + +
    @@ -2000,56 +2371,50 @@ exports[`should render with a display and graphic 1`] = ` className="body" >
    -
    - - } - iconAlignment="center" - intl={ - Object { - "defaultFormats": Object {}, - "defaultLocale": "en", - "formatDate": [Function], - "formatHTMLMessage": [Function], - "formatMessage": [Function], - "formatNumber": [Function], - "formatPlural": [Function], - "formatRelative": [Function], - "formatTime": [Function], - "formats": Object {}, - "formatters": Object { - "getDateTimeFormat": [Function], - "getMessageFormat": [Function], - "getNumberFormat": [Function], - "getPluralFormat": [Function], - "getRelativeFormat": [Function], - }, - "locale": "en", - "messages": null, - "now": [Function], - "onError": [Function], - "textComponent": "span", - "timeZone": null, - } + + } + iconAlignment="center" + intl={ + Object { + "defaultFormats": Object {}, + "defaultLocale": "en", + "formatDate": [Function], + "formatHTMLMessage": [Function], + "formatMessage": [Function], + "formatNumber": [Function], + "formatPlural": [Function], + "formatRelative": [Function], + "formatTime": [Function], + "formats": Object {}, + "formatters": Object { + "getDateTimeFormat": [Function], + "getMessageFormat": [Function], + "getNumberFormat": [Function], + "getPluralFormat": [Function], + "getRelativeFormat": [Function], + }, + "locale": "en", + "messages": null, + "now": [Function], + "onError": [Function], + "textComponent": "span", + "timeZone": null, } - isDisabled={false} - isTruncated={false} - text="display 1" - textStyle="primary" - /> -
    + } + isDisabled={false} + isTruncated={false} + text="display 1" + textStyle="primary" + />
    diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..53bdcb9fb Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..0add96b01 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..090cd5bb8 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..aa76fcbfb Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..22764c3ed Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_small/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..b7547e8b6 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..320c06905 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..7e6ad0e2e Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..419e38d4a Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..cce1ebee2 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..2e53629ea Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_small/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..de29f0168 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..4af7f59d1 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_enormous/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..608d8eb71 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_huge/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..4e1d8c681 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..58481f651 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..4afd21a0f Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_small/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png new file mode 100644 index 000000000..9726401f7 Binary files /dev/null and b/packages/terra-clinical-item-view/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/item-view-spec/with_a_singular_display.png differ diff --git a/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js b/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js index 4382d08ea..6f6448f09 100644 --- a/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js +++ b/packages/terra-clinical-item-view/tests/wdio/item-view-spec.js @@ -7,6 +7,12 @@ Terra.describeViewports('Clinical Item View', ['tiny', 'small', 'medium', 'large Terra.validates.element('with two column and start displays', { selector: '#test-displays-two-start' }); }); + it('renders with a singular display', () => { + browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/single-display-item-view'); + + Terra.validates.element('with a singular display', { selector: '#test-single-display' }); + }); + it('renders with displays by row', () => { browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/displays-item-view-by-row');