From 825361ab1ceaa78fde73376c3ca08a7cc6462523 Mon Sep 17 00:00:00 2001
From: Vim USDS <vimal.k.shah@omb.eop.gov>
Date: Thu, 8 Sep 2022 23:12:57 -0700
Subject: [PATCH] Remove up/down arrows from indicators

---
 .../Indicator/Indicator.module.scss           |  2 +-
 client/src/components/Indicator/Indicator.tsx | 38 +++++--------------
 client/src/data/constants.tsx                 |  2 +
 3 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/client/src/components/Indicator/Indicator.module.scss b/client/src/components/Indicator/Indicator.module.scss
index 2f6dbade..6d9ef09b 100644
--- a/client/src/components/Indicator/Indicator.module.scss
+++ b/client/src/components/Indicator/Indicator.module.scss
@@ -59,7 +59,7 @@
 
           }
           .unavailable {
-            opacity: .2;
+            opacity: .6;
           }
         }
       }
diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx
index efbc2a05..ff1c774a 100644
--- a/client/src/components/Indicator/Indicator.tsx
+++ b/client/src/components/Indicator/Indicator.tsx
@@ -8,20 +8,14 @@ import * as constants from '../../data/constants';
 import * as EXPLORE_COPY from '../../data/copy/explore';
 
 // @ts-ignore
-import downArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_downward.svg';
-// @ts-ignore
-import upArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_upward.svg';
-// @ts-ignore
-import unAvailable from '/node_modules/uswds/dist/img/usa-icons/do_not_disturb.svg';
+import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg';
 
 interface IIndicator {
   indicator: indicatorInfo,
 }
 
 interface IIndicatorValueIcon {
-  type: indicatorType,
   value: number | null,
-  isAboveThresh: boolean,
 };
 
 interface IIndicatorValueSubText {
@@ -37,31 +31,21 @@ interface IIndicatorValue {
 }
 
 /**
- * This component will determine what indicator's icon should be (arrowUp, arrowDown or unavailable) and
- * return the appropriate JSX.
+ * This component will determine what indicator's icon should be. Either show the unavailable icon
+ * or show nothing.
  *
- * @param {number | null} props
+ * @param {number | null} value
  * @return {JSX.Element}
  */
-export const IndicatorValueIcon = ({type, value, isAboveThresh}: IIndicatorValueIcon) => {
+export const IndicatorValueIcon = ({value}: IIndicatorValueIcon) => {
   const intl = useIntl();
 
-  if (value == null) {
-    return <img className={styles.unavailable}
+  return value === null ? (
+    <img className={styles.unavailable}
       src={unAvailable}
       alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
-    />;
-  } else if (type === 'percent' || type === 'percentile') {
-    return isAboveThresh ?
-      <img
-        src={upArrow}
-        alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_UP)}
-      /> :
-      <img
-        src={downArrow}
-        alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN)}
-      />;
-  } else return <></>;
+    />
+  ) : <></>;
 };
 
 /**
@@ -155,7 +139,7 @@ export const superscriptOrdinal = (indicatorValueWithSuffix:string) => {
 export const IndicatorValue = ({type, displayStat}:IIndicatorValue) => {
   const intl = useIntl();
 
-  if (displayStat === null) return <React.Fragment></React.Fragment>;
+  if (displayStat === null) return <>{constants.MISSING_DATA_STRING}</>;
 
   if (type === 'percent' || type === 'percentile') {
     // In this case we will show no value and an icon only
@@ -256,9 +240,7 @@ const Indicator = ({indicator}:IIndicator) => {
             {/* Indicator icon - up arrow, down arrow, or unavailable */}
             <div className={styles.indicatorArrow}>
               <IndicatorValueIcon
-                type={indicator.type}
                 value={displayStat}
-                isAboveThresh={isAboveThresh}
               />
             </div>
           </div>
diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx
index 42728f4b..7224b6f2 100644
--- a/client/src/data/constants.tsx
+++ b/client/src/data/constants.tsx
@@ -25,6 +25,8 @@ export type J40Properties = { [key: string]: any };
 
 // ****** SIDE PANEL BACKEND SIGNALS ***********
 
+export const MISSING_DATA_STRING = '--';
+
 // Tribal signals
 export const TRIBAL_ID = 'tribalId';
 export const LAND_AREA_NAME = 'landAreaName';