[terra-clinical-item-view] Added contentWidth prop to allow custom wi…

…dth for items (#934)

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

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added `contentWidth` prop for applying custom width to item views.
+
 ## 4.14.0 - (March 1, 2024)
 
 * Changed

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

@@ -78,6 +78,10 @@ const propTypes = {
    * Function callback for the ref of the outer most div.
    */
   refCallback: PropTypes.func,
+  /**
+   * A string for content's width. Any valid css string.
+   */
+  contentWidth: PropTypes.string,
 };
 
 const defaultProps = {
@@ -92,6 +96,7 @@ const defaultProps = {
   endAccessory: undefined,
   displays: [],
   comment: undefined,
+  contentWidth: undefined,
 };
 
 const renderAccessory = (accessory, reserveSpace, accessoryAlignment, type) => {
@@ -150,8 +155,9 @@ const classesForContent = (rowIndex, rowCount, contentIndex, emphasis) => {
   return ['content'].concat(classes);
 };
 
-const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling) => {
+const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling, contentWidth) => {
   const rowKey = rowIndex;
+  const style = contentWidth && { width: contentWidth };
 
   return (
     <li className={cx('row')} key={rowKey}>
@@ -161,7 +167,8 @@ const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling) =>
           const contentClasses = overrideDefaultStyling ? 'content' : classesForContent(rowIndex, rowCount, displayIndex, emphasis);
 
           return (
-            <li className={cx(contentClasses)} key={displayKey}>
+            // eslint-disable-next-line react/forbid-dom-props
+            <li style={style} className={cx(contentClasses)} key={displayKey}>
               {display}
             </li>
           );
@@ -171,10 +178,11 @@ const renderRow = (row, rowIndex, rowCount, emphasis, overrideDefaultStyling) =>
   );
 };
 
-const renderTwoColumns = (displayGroup, displayGroupIndex, emphasis, overrideDefaultStyling) => {
+const renderTwoColumns = (displayGroup, displayGroupIndex, emphasis, overrideDefaultStyling, contentWidth) => {
   const columnKey = displayGroupIndex;
   const displayCount = displayGroup.length;
   const containerStyling = displayGroupIndex === 0 ? 'primary-column' : 'secondary-column';
+  const style = contentWidth && { width: contentWidth };
 
   return (
     <li className={cx(containerStyling)} key={columnKey}>
@@ -184,7 +192,8 @@ const renderTwoColumns = (displayGroup, displayGroupIndex, emphasis, overrideDef
           const contentClasses = overrideDefaultStyling ? 'content' : classesForContent(contentIndex, displayCount, displayGroupIndex, emphasis);
 
           return (
-            <li className={cx(contentClasses)} key={contentKey}>
+            // eslint-disable-next-line react/forbid-dom-props
+            <li style={style} className={cx(contentClasses)} key={contentKey}>
               {display}
             </li>
           );
@@ -194,8 +203,9 @@ const renderTwoColumns = (displayGroup, displayGroupIndex, emphasis, overrideDef
   );
 };
 
-const renderColumn = (displays, emphasis, overrideDefaultStyling) => {
+const renderColumn = (displays, emphasis, overrideDefaultStyling, contentWidth) => {
   const displayCount = displays.length;
+  const style = contentWidth && { width: contentWidth };
 
   return (
     <div>
@@ -209,7 +219,8 @@ const renderColumn = (displays, emphasis, overrideDefaultStyling) => {
           const contentClasses = overrideDefaultStyling ? 'content' : classesForContent(displayIndex, displayCount, 0, emphasis);
 
           return (
-            <li className={cx(contentClasses)} key={contentKey}>
+            // eslint-disable-next-line react/forbid-dom-props
+            <li style={style} className={cx(contentClasses)} key={contentKey}>
               {display}
             </li>
           );
@@ -219,7 +230,7 @@ const renderColumn = (displays, emphasis, overrideDefaultStyling) => {
   );
 };
 
-const renderByRowView = (displays, emphasis, overrideDefaultStyling) => {
+const renderByRowView = (displays, emphasis, overrideDefaultStyling, contentWidth) => {
   const displayGroups = [];
 
   while (displays.length) {
@@ -230,24 +241,26 @@ const renderByRowView = (displays, emphasis, overrideDefaultStyling) => {
     <div>
       <ul className={cx('row-list-container')}>
         {displayGroups.map((displayRow, rowIndex) => {
-          const row = renderRow(displayRow, rowIndex, displayGroups.length, emphasis, overrideDefaultStyling);
+          const row = renderRow(displayRow, rowIndex, displayGroups.length, emphasis, overrideDefaultStyling, contentWidth);
           return row;
         })}
       </ul>
     </div>
   );
 };
 
-const renderSingleDisplayView = (singleDisplay, overrideDefaultStyling) => {
+const renderSingleDisplayView = (singleDisplay, overrideDefaultStyling, contentWidth) => {
   /**
    * 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'];
+  const style = contentWidth && { width: contentWidth };
 
   return (
     <div className={cx('single-result-column-container')}>
-      <div className={cx(contentClass)}>
+      {/* eslint-disable-next-line react/forbid-dom-props */}
+      <div style={style} className={cx(contentClass)}>
         {singleDisplay}
       </div>
     </div>
@@ -276,7 +289,7 @@ const twoColumnGrouping = (displays) => {
   return displayGroups;
 };
 
-const renderView = (displays, layout, emphasis, overrideDefaultStyling, trueColumn) => {
+const renderView = (displays, layout, emphasis, overrideDefaultStyling, trueColumn, contentWidth) => {
   if (displays === null || displays === undefined || !displays.length) {
     return undefined;
   }
@@ -287,18 +300,18 @@ const renderView = (displays, layout, emphasis, overrideDefaultStyling, trueColu
    * 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 (displaysSlice.length === 1) { return renderSingleDisplayView(displaysSlice, overrideDefaultStyling, contentWidth); }
 
   if (layout === Layouts.TWO_COLUMNS) {
-    if (!trueColumn) { return renderByRowView(displaysSlice, emphasis, overrideDefaultStyling); }
+    if (!trueColumn) { return renderByRowView(displaysSlice, emphasis, overrideDefaultStyling, contentWidth); }
 
     const displayGroups = twoColumnGrouping(displaysSlice);
 
     return (
       <div>
         <ul className={cx('column-list-container')}>
           {displayGroups.map((group, index) => {
-            const column = renderTwoColumns(group, index, emphasis, overrideDefaultStyling);
+            const column = renderTwoColumns(group, index, emphasis, overrideDefaultStyling, contentWidth);
             return column;
           })}
         </ul>
@@ -308,7 +321,7 @@ const renderView = (displays, layout, emphasis, overrideDefaultStyling, trueColu
 
   return (
     <div>
-      {renderColumn(displaysSlice, emphasis, overrideDefaultStyling)}
+      {renderColumn(displaysSlice, emphasis, overrideDefaultStyling, contentWidth)}
     </div>
   );
 };
@@ -340,6 +353,7 @@ const ItemView = ({
   displays,
   comment,
   refCallback,
+  contentWidth,
   ...customProps
 }) => {
   const theme = React.useContext(ThemeContext);
@@ -362,7 +376,7 @@ const ItemView = ({
     <div {...customProps} className={viewClassNames} ref={refCallback}>
       {renderAccessory(startAccessory, reserveStartAccessorySpace, accessoryAlignment, 'start')}
       <div className={cx('body')}>
-        {renderView(displays, layout, textEmphasis, overrideDefaultStyling, trueColumn)}
+        {renderView(displays, layout, textEmphasis, overrideDefaultStyling, trueColumn, contentWidth)}
         {comment}
       </div>
       {renderAccessory(endAccessory, false, accessoryAlignment, 'end')}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import IconAlert from 'terra-icon/lib/icon/IconAlert';
+import ItemView from '../../../ItemView';
+
+const display1 = <ItemView.Display icon={<IconAlert />} iconAlignment="inline" text="display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text display1 Text" key="123" />;
+const display2 = <ItemView.Display icon={<IconAlert />} iconAlignment="inline" text="display2 Text display2 Text display2 Text display2 Text display2 Text display2 Text display2 Text display2 Text display2 Text" key="124" />;
+const displays = [display1, display2];
+
+const views = () => (
+  <div>
+    <h2>One Column Layout</h2>
+    <ItemView contentWidth="50%" displays={displays} id="test-displays" />
+  </div>
+);
+
+export default views;

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

@@ -294,6 +294,14 @@ it('should render each column as an unordered list within a primary unordered li
   expect(itemView).toMatchSnapshot();
 });
 
+it('should render display with contentWidth', () => {
+  const display1 = shallowWithIntl(<ItemView.Display text="display 1" />);
+  const displays = [display1];
+  const itemView = shallow(<ItemView contentWidth="100%" displays={displays} />);
+  expect(itemView.find('ItemDisplay')).toHaveLength(1);
+  expect(itemView).toMatchSnapshot();
+});
+
 it('correctly applies the theme context className', () => {
   jest.spyOn(React, 'useContext')
     .mockReturnValue({

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

@@ -470,6 +470,64 @@ exports[`should render an end accessory 1`] = `
 </div>
 `;
 
+exports[`should render display with contentWidth 1`] = `
+<div
+  className="item-view one-column"
+>
+  <div
+    className="body"
+  >
+    <div
+      className="single-result-column-container"
+    >
+      <div
+        className="content content-primary-size content-primary-color"
+        style={
+          Object {
+            "width": "100%",
+          }
+        }
+      >
+        <ItemDisplay
+          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"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render displays with original styling when overrideDefaultStyling prop is true 1`] = `
 <div
   className="item-view one-column"

packages/terra-clinical-item-view/tests/wdio/item-view-spec.js

@@ -57,6 +57,12 @@ Terra.describeViewports('Clinical Item View', ['tiny', 'small', 'medium', 'large
 
     Terra.validates.element('with override styling');
   });
+
+  it('renders with a custom content width', () => {
+    browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/content-width-item-view');
+
+    Terra.validates.element('with custom content width', { selector: '#test-displays' });
+  });
 });
 
 Terra.describeViewports('Clinical Item View', ['enormous'], () => {

packages/terra-clinical-result/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated `No Results` to `No Result` in translations except english.
+
 ## 1.23.0 - (March 1, 2024)
 
 * Changed

packages/terra-clinical-result/translations/de.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Zum Anzeigen weiterer Details auswählen",
   "Terra.clinicalResult.includesAdditionalValuesAria": "Ergebnis enthält weitere Werte",
   "Terra.clinicalResult.viewResults": "Ergebnisse anzeigen",
-  "Terra.clinicalResult.resultNoData": "Keine Ergebnisse",
+  "Terra.clinicalResult.resultNoData": "Kein Ergebnis",
   "Terra.clinicalResult.resultComment": "Ergebnis enthält einen Kommentar",
   "Terra.clinicalResult.resultModified": "Geändertes Ergebnis",
   "Terra.clinicalResult.resultUnverified": "Nicht verifiziertes Ergebnis",

packages/terra-clinical-result/translations/es-ES.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Seleccione para ver más detalles",
   "Terra.clinicalResult.includesAdditionalValuesAria": "El resultado incluye valores adicionales",
   "Terra.clinicalResult.viewResults": "Ver resultados",
-  "Terra.clinicalResult.resultNoData": "Sin resultados",
+  "Terra.clinicalResult.resultNoData": "Ningún resultado",
   "Terra.clinicalResult.resultComment": "El resultado incluye un comentario",
   "Terra.clinicalResult.resultModified": "Resultado modificado",
   "Terra.clinicalResult.resultUnverified": "Resultado sin verificar",

packages/terra-clinical-result/translations/es-US.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Seleccione para ver más detalles",
   "Terra.clinicalResult.includesAdditionalValuesAria": "El resultado incluye valores adicionales",
   "Terra.clinicalResult.viewResults": "Ver resultados",
-  "Terra.clinicalResult.resultNoData": "Sin resultados",
+  "Terra.clinicalResult.resultNoData": "Ningún resultado",
   "Terra.clinicalResult.resultComment": "El resultado incluye un comentario",
   "Terra.clinicalResult.resultModified": "Resultado modificado",
   "Terra.clinicalResult.resultUnverified": "Resultado sin verificar",

packages/terra-clinical-result/translations/es.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Seleccione para ver más detalles",
   "Terra.clinicalResult.includesAdditionalValuesAria": "El resultado incluye valores adicionales",
   "Terra.clinicalResult.viewResults": "Ver resultados",
-  "Terra.clinicalResult.resultNoData": "Sin resultados",
+  "Terra.clinicalResult.resultNoData": "Ningún resultado",
   "Terra.clinicalResult.resultComment": "El resultado incluye un comentario",
   "Terra.clinicalResult.resultModified": "Resultado modificado",
   "Terra.clinicalResult.resultUnverified": "Resultado sin verificar",

packages/terra-clinical-result/translations/nl-BE.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Selecteer om meer details te bekijken",
   "Terra.clinicalResult.includesAdditionalValuesAria": "Resultaat bevat aanvullende waarden",
   "Terra.clinicalResult.viewResults": "Resultaten weergeven",
-  "Terra.clinicalResult.resultNoData": "Geen resultaten",
+  "Terra.clinicalResult.resultNoData": "Geen resultaat",
   "Terra.clinicalResult.resultComment": "Resultaat bevat een opmerking",
   "Terra.clinicalResult.resultModified": "Gewijzigd resultaat",
   "Terra.clinicalResult.resultUnverified": "Niet-geverifieerd resultaat",

packages/terra-clinical-result/translations/nl.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Selecteer om meer details te bekijken",
   "Terra.clinicalResult.includesAdditionalValuesAria": "Resultaat bevat aanvullende waarden",
   "Terra.clinicalResult.viewResults": "Resultaten weergeven",
-  "Terra.clinicalResult.resultNoData": "Geen resultaten",
+  "Terra.clinicalResult.resultNoData": "Geen resultaat",
   "Terra.clinicalResult.resultComment": "Resultaat bevat een opmerking",
   "Terra.clinicalResult.resultModified": "Gewijzigd resultaat",
   "Terra.clinicalResult.resultUnverified": "Niet-geverifieerd resultaat",

packages/terra-clinical-result/translations/pt-BR.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Selecione para visualizar mais detalhes",
   "Terra.clinicalResult.includesAdditionalValuesAria": "O resultado inclui valores adicionais",
   "Terra.clinicalResult.viewResults": "Visualizar resultados",
-  "Terra.clinicalResult.resultNoData": "Sem resultados",
+  "Terra.clinicalResult.resultNoData": "Nenhum resultado",
   "Terra.clinicalResult.resultComment": "O resultado inclui um comentário",
   "Terra.clinicalResult.resultModified": "Resultado modificado",
   "Terra.clinicalResult.resultUnverified": "Resultado não verificado",

packages/terra-clinical-result/translations/pt.json

@@ -6,7 +6,7 @@
   "Terra.clinicalResult.selectToViewAria": "Selecione para visualizar mais detalhes",
   "Terra.clinicalResult.includesAdditionalValuesAria": "O resultado inclui valores adicionais",
   "Terra.clinicalResult.viewResults": "Visualizar resultados",
-  "Terra.clinicalResult.resultNoData": "Sem resultados",
+  "Terra.clinicalResult.resultNoData": "Nenhum resultado",
   "Terra.clinicalResult.resultComment": "O resultado inclui um comentário",
   "Terra.clinicalResult.resultModified": "Resultado modificado",
   "Terra.clinicalResult.resultUnverified": "Resultado não verificado",