5520 – Update Number and List components empty states (#2169)

Explicitly passing null got a blank output. So we updated how we deal with those values by creating getDisplayValue function, and added a new test for it. 

References: 5520, 5327
PR: 2169

src/app/components/cds/Sandbox.js

@@ -2104,7 +2104,7 @@ const SandboxComponent = ({ admin }) => {
                   >
                     <option value="2024">2024</option>
                     <option value="0">0</option>
-                    <option value="-">null</option>
+                    <option value="null">null</option>
                   </Select>
                 </li>
                 <li>
@@ -2170,7 +2170,7 @@ const SandboxComponent = ({ admin }) => {
                       id: 'item1',
                     },
                     {
-                      itemValue: '94607',
+                      itemValue: null,
                       itemLink: 'e.not/a/working/url/',
                       itemText: 'Should not have a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius commodo malesuada',
                       id: 'item2',

src/app/components/cds/charts/ListWidgetItem.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getDisplayValue } from './NumberWidget';
 import { isValidURL } from '../../../helpers';
 import styles from './ListWidget.module.css';
 
@@ -16,22 +17,22 @@ const ListWidgetItem = ({
         :
         <div className={styles.listWidgetItemText}>{itemText}</div>
     }
-    <div className={styles.listWidgetItemValue}>{itemValue}</div>
+    <div className={styles.listWidgetItemValue}>{getDisplayValue(itemValue)}</div>
   </li>
 );
 
 ListWidgetItem.defaultProps = {
   id: null,
   itemLink: null,
   itemText: null,
-  itemValue: '-',
+  itemValue: null,
 };
 
 ListWidgetItem.propTypes = {
   id: PropTypes.string,
   itemLink: PropTypes.string,
   itemText: PropTypes.node,
-  itemValue: PropTypes.string,
+  itemValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 export default ListWidgetItem;

src/app/components/cds/charts/NumberWidget.js

@@ -2,43 +2,56 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './NumberWidget.module.css';
 
+const getDisplayValue = (itemCount) => {
+  const stringValue = String(itemCount);
+
+  if (stringValue === 'null') {
+    return '-';
+  }
+
+  return stringValue;
+};
+
 const NumberWidget = ({
   color,
   contextText,
   itemCount,
   title,
   unit,
-}) => (
-  <div className={styles.numberWidgetWrapper} style={{ backgroundColor: color }}>
-    <div className={styles.numberWidgetTitle}>
-      {title}
-    </div>
-    { itemCount &&
+}) => {
+  const displayValue = getDisplayValue(itemCount);
+
+  return (
+    <div className={styles.numberWidgetWrapper} style={{ backgroundColor: color }}>
+      <div className={styles.numberWidgetTitle}>
+        {title}
+      </div>
       <div className={styles.numberWidgetItemCount}>
-        {itemCount} { unit && itemCount !== '-' && <span className={styles.numberWidgetUnit}>{unit}</span> }
+        { displayValue } { unit && displayValue !== '-' && <span className={styles.numberWidgetUnit}>{unit}</span> }
       </div>
-    }
-    { contextText &&
+      { contextText &&
       <div className={styles.numberWidgetContextText}>
         {contextText}
       </div>
-    }
-  </div>
-);
+      }
+    </div>
+  );
+};
 
 NumberWidget.defaultProps = {
   color: 'var(--color-blue-90)',
   contextText: null,
-  itemCount: '-',
+  itemCount: null,
   unit: null,
 };
 
 NumberWidget.propTypes = {
   color: PropTypes.string,
   contextText: PropTypes.node,
-  itemCount: PropTypes.string,
+  itemCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   title: PropTypes.node.isRequired,
   unit: PropTypes.node,
 };
 
+export { getDisplayValue };
 export default NumberWidget;

src/app/components/cds/charts/NumberWidget.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import NumberWidget from './NumberWidget';
+import NumberWidget, { getDisplayValue } from './NumberWidget';
 import { mountWithIntl } from '../../../../../test/unit/helpers/intl-test';
 
 describe('<NumberWidget />', () => {
@@ -26,4 +26,12 @@ describe('<NumberWidget />', () => {
   it('renders without crashing if not required are null', () => {
     mountWithIntl(<NumberWidget {...nullProps} />);
   });
+
+  it('displays the a random number, 0 or null correctly', () => {
+    expect(getDisplayValue(0)).toEqual('0');
+    expect(getDisplayValue(2024)).toEqual('2024');
+    expect(getDisplayValue('0')).toEqual('0');
+    expect(getDisplayValue('2024')).toEqual('2024');
+    expect(getDisplayValue(null)).toEqual('-');
+  });
 });