[clinical-item-view] Add default styling override

packages/terra-clinical-item-view/CHANGELOG.md

@@ -5,6 +5,9 @@
 * Changed
   * Fixed the readout order for two column layout to read by column and not by row. Created true columns instead of split rows.
 
+* Added
+  * Added `overrideDefaultStyling` prop so consumers can choose whether to use their original item display styling instead of the default styling item view applies.
+
 ## 4.9.0 - (August 2, 2023)
 
 * Changed

packages/terra-clinical-item-view/src/ItemView.jsx

@@ -33,6 +33,10 @@ const propTypes = {
    * The text color emphasis when using two columns. One of `default`, `start`.
    */
   textEmphasis: PropTypes.oneOf(['default', 'start']),
+  /**
+   * Option to override the item view default styling so the original styling for item display is shown.
+   */
+  overrideDefaultStyling: PropTypes.bool,
   /**
    * Whether or not all text on the view should be truncated.
    */
@@ -70,6 +74,7 @@ const propTypes = {
 const defaultProps = {
   layout: Layouts.ONE_COLUMN,
   textEmphasis: TextEmphasisTypes.DEFAULT,
+  overrideDefaultStyling: false,
   isTruncated: false,
   accessoryAlignment: AccessoryAlignments.ALIGN_CENTER,
   startAccessory: undefined,
@@ -135,7 +140,7 @@ const classesForContent = (rowIndex, rowCount, columnIndex, emphasis) => {
   return ['content'].concat(classes);
 };
 
-const renderColumn = (displayGroup, displayGroupIndex, emphasis) => {
+const renderColumn = (displayGroup, displayGroupIndex, emphasis, overrideDefaultStyling) => {
   const columnKey = displayGroupIndex;
   const displayCount = displayGroup.length;
   let containerStyling;
@@ -150,7 +155,14 @@ const renderColumn = (displayGroup, displayGroupIndex, emphasis) => {
     <div className={cx(containerStyling)} key={columnKey}>
       {displayGroup.map((display, contentIndex) => {
         const contentKey = contentIndex;
-        const contentClasses = classesForContent(contentIndex, displayCount, displayGroupIndex, emphasis);
+        let contentClasses;
+
+        if (overrideDefaultStyling) {
+          contentClasses = 'content';
+        } else {
+          contentClasses = classesForContent(contentIndex, displayCount, displayGroupIndex, emphasis);
+        }
+
         return (
           <div className={cx(contentClasses)} key={contentKey}>
             {display}
@@ -161,7 +173,7 @@ const renderColumn = (displayGroup, displayGroupIndex, emphasis) => {
   );
 };
 
-const renderView = (displays, layout, emphasis) => {
+const renderView = (displays, layout, emphasis, overrideDefaultStyling) => {
   if (displays === null || displays === undefined || !displays.length) {
     return undefined;
   }
@@ -197,7 +209,7 @@ const renderView = (displays, layout, emphasis) => {
   return (
     <div className={cx('column-container')}>
       {displayGroups.map((group, index) => {
-        const column = renderColumn(group, index, emphasis);
+        const column = renderColumn(group, index, emphasis, overrideDefaultStyling);
         return column;
       })}
     </div>
@@ -207,6 +219,7 @@ const renderView = (displays, layout, emphasis) => {
 const ItemView = ({
   layout,
   textEmphasis,
+  overrideDefaultStyling,
   isTruncated,
   accessoryAlignment,
   startAccessory,
@@ -234,7 +247,7 @@ const ItemView = ({
     <div {...customProps} className={viewClassNames} ref={refCallback}>
       {renderAccessory(startAccessory, reserveStartAccessorySpace, accessoryAlignment, 'start')}
       <div className={cx('body')}>
-        {renderView(displays, layout, textEmphasis)}
+        {renderView(displays, layout, textEmphasis, overrideDefaultStyling)}
         {comment}
       </div>
       {renderAccessory(endAccessory, false, accessoryAlignment, 'end')}

packages/terra-clinical-item-view/src/ItemView.module.scss

@@ -62,7 +62,6 @@
 
   .content {
     align-items: flex-start;
-    color: var(--terra-clinical-item-view-content-color, rgba(28, 31, 33, 0.65));
     display: flex;
     overflow: hidden; // VERY IMPORTANT FOR IE10
   }

packages/terra-clinical-item-view/src/terra-dev-site/doc/clinical-item-view/clinicalItemView.1.doc.mdx

@@ -6,6 +6,7 @@ import ItemViewTwoColumnStart from '../example/ItemViewTwoColumnStart?dev-site-e
 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 ItemViewProps from 'terra-clinical-item-view/src/ItemView.jsx?dev-site-props-table';
 
@@ -40,6 +41,7 @@ import ItemView from 'terra-clinical-item-view';
 <ItemViewComment title="ItemView - Comment" />
 <ItemViewAll title="ItemView - All Elements" />
 <ItemViewAllTopAligned title="ItemView - All Elements Top Aligned" />
+<ItemViewOverrideDefaultStyling title="ItemView - Override Default Styling" />
 
 ## Item View Props
 <ItemViewProps />

packages/terra-clinical-item-view/src/terra-dev-site/doc/example/ItemViewOverrideDefaultStyling.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import IconPerson from 'terra-icon/lib/icon/IconPerson';
+import ItemView from 'terra-clinical-item-view';
+
+const display1 = <ItemView.Display icon={<IconPerson />} iconAlignment="inline" text="Asif Khan" textStyle="strong" />;
+const display2 = <ItemView.Display text="Care Position: Primary" textStyle="secondary" />;
+const display3 = <ItemView.Display text="Room 100A" textStyle="strikeThrough" />;
+const display4 = <ItemView.Display text="Acuity: 5" textStyle="attention" />;
+const display5 = <ItemView.Display text="Start Time: 08-05-2016 12:00:00" />;
+const display6 = <ItemView.Display text="End Time: 08-05-2016 16:00:00" />;
+const displays = [display1, display2, display3, display4, display5, display6];
+
+const comment = <ItemView.Comment text="Faint red rash appeared at 08-05-2016 13:24:00" />;
+
+export default () => <ItemView displays={displays} comment={comment} overrideDefaultStyling />;

packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/ItemViewCommon.test.module.scss

@@ -16,6 +16,10 @@
     max-width: 700px;
   }
 
+  .styling-override-itemview-wrapper {
+    max-width: 900px;
+  }
+
   .itemview-fontsize {
     font-size: 100px;
   }

packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/StylingOverrideItemView.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import IconAlert from 'terra-icon/lib/icon/IconAlert';
+import ItemView from '../../../ItemView';
+import styles from './ItemViewCommon.test.module.scss';
+
+const display1 = <ItemView.Display text="display 1 (default display styling)" key="123" />;
+const display2 = <ItemView.Display text="display 2 (strong display styling)" textStyle="strong" key="124" />;
+const display3 = <ItemView.Display text="display 3 (attention display styling)" textStyle="attention" key="125" />;
+const display4 = <ItemView.Display text="display 4 (secondary display styling)" textStyle="secondary" key="126" />;
+const display5 = <ItemView.Display text="display 5 (strikethrough display styling)" textStyle="strikeThrough" key="127" />;
+const display6 = <ItemView.Display text="display 6 (default display styling with icon)" icon={<IconAlert />} iconAlignment="inline" key="128" />;
+const displays = [display1, display2, display3, display4, display5, display6];
+const comment = id => <ItemView.Comment id={id} text="Some Comment" />;
+
+const cx = classNames.bind(styles);
+
+const views = () => (
+  <div className={cx('styling-override-itemview-wrapper')}>
+    <h2>Override Default Styling</h2>
+    <ItemView displays={displays} overrideDefaultStyling comment={comment(1)} id="test-displays-override" />
+    <br />
+    <h2>Override Default Styling Two Column Layout </h2>
+    <ItemView displays={displays} layout="twoColumns" overrideDefaultStyling comment={comment(2)} id="test-displays-override-two" />
+    <br />
+    <h2>Override Default Styling with TextEmphasis set to start</h2>
+    <p>This test is just showing that even if TextEmphasis has been explicitly set to start, it will be ignored when the override prop is set to true.</p>
+    <ItemView displays={displays} textEmphasis="start" overrideDefaultStyling id="test-displays-override-start-emphasis" />
+  </div>
+);
+
+export default views;

packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx

@@ -46,6 +46,17 @@ it('should render with a display and graphic', () => {
   expect(itemView).toMatchSnapshot();
 });
 
+it('should render displays with original styling when overrideDefaultStyling prop is true', () => {
+  const display1 = shallowWithIntl(<ItemView.Display text="display 1" textStyle="strong" />);
+  const display2 = shallowWithIntl(<ItemView.Display text="display 2" textStyle="attention" />);
+  const display3 = shallowWithIntl(<ItemView.Display text="display 3" textStyle="secondary" />);
+  const display4 = shallowWithIntl(<ItemView.Display text="display 4" textStyle="strikeThrough" />);
+  const displays = [display1, display2, display3, display4];
+  const itemView = shallow(<ItemView displays={displays} overrideDefaultStyling />);
+  expect(itemView.find('ItemDisplay')).toHaveLength(4);
+  expect(itemView).toMatchSnapshot();
+});
+
 it('should render truncated display', () => {
   const display1 = shallowWithIntl(<ItemView.Display text="display1display1display1display1display1display1display1display1" isTruncated />);
   const displays = [display1];
@@ -120,7 +131,7 @@ it('should render start accessory space reserved', () => {
   expect(itemView).toMatchSnapshot();
 });
 
-it('should render a end accessory', () => {
+it('should render an end accessory', () => {
   const testElement = <img alt="Graphic" />;
   const params = {
     layout: 'oneColumn',
@@ -188,7 +199,7 @@ it('should render two columns with 8 displays', () => {
   expect(itemView).toMatchSnapshot();
 });
 
-it('should render two columns with odd number of displays', () => {
+it('should render two columns with an odd number of displays', () => {
   const display1 = shallowWithIntl(<ItemView.Display text="display 1" />);
   const display2 = shallowWithIntl(<ItemView.Display text="display 2" />);
   const display3 = shallowWithIntl(<ItemView.Display text="display 3" />);