Spanish changes from translation team (#1650)

* Add translation of 'email' on About page

- Email to Correo electrónico

* Add en ingles suffix and Spanish oridinals

* Correct variable name in es.json

* Add missing colon

* Replace brackets with parens when using en ingles

client/src/components/AboutCard/AboutCard.tsx

@@ -9,7 +9,7 @@ interface AboutCardProps {
   imgSrc?: string;
   header: string;
   size: 'small' | 'large';
-  linkText?: string;
+  linkText?: string | JSX.Element;
   url?: string;
   openUrlNewTab?: boolean;
   className?: string;
@@ -62,7 +62,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
                 <LinkTypeWrapper
                   linkText={props.linkText}
                   internal={props.internal}
-                  url={props.url}
+                  url={props.url ? props.url : ''}
                   openUrlNewTab={props.openUrlNewTab}
                   className={'j40-aboutcard-link'}
                 />

client/src/components/Indicator/Indicator.tsx

@@ -88,8 +88,6 @@ export const IndicatorValueSubText = ({value, isAboveThresh, threshold, isPercen
         <IndicatorValue isPercent={isPercent} displayStat={threshold} /> :
         <IndicatorValue isPercent={isPercent} displayStat={90} />
       }
-
-      {/* {!isPercent && `th`} */}
       {` `}
       {
         isPercent ?
@@ -105,13 +103,34 @@ export const IndicatorValueSubText = ({value, isAboveThresh, threshold, isPercen
  * just the suffix portion if the value is a percentile. This function will add
  * a superscript styling to just the suffix portion of percentile values.
  *
+ * The i18n variable named i18nOrdinalSuffix, in the IndicatorValue function defines the
+ * various prefixes. The Spanish version of the i18n variable works in a similar manner,
+ * however has a differnce. The superscripting is different for Spanish.
+ * In Spanish, the suffix is a ".a" and ".o", where only the "a" and "o" are superscripted.
+ * This function handles this case.
+ *
+ * Verbatim from translation team:
+ * We suggest changing this to the Spanish ordinal number abbreviation, which is .o for masculine
+ * and .a for feminine gendered words. ***Since this ranking applies to the communities of focus,
+ * which use a feminine gender in Spanish, we recommend that the th ordinal abbreviation in English
+ * be substituted with the feminine ordinal abbreviation in Spanish: .a  throughout the text.
+ * E.g., 19th would be 19.a in Spanish and 65th would be 65.a
+ *
  * @param {string} indicatorValueWithSuffix
  * @return {string}
  */
 export const superscriptOrdinal = (indicatorValueWithSuffix:string) => {
+  // Spanish case:
+  if (indicatorValueWithSuffix.indexOf('.') !== -1) {
+    const ordinalSuffix = indicatorValueWithSuffix.charAt(indicatorValueWithSuffix.length - 1);
+    const indicatorValue = indicatorValueWithSuffix.slice(0, -1);
+
+    return <>{indicatorValue}<sup style={{top: '-0.2em'}}>{ordinalSuffix}</sup></>;
+  }
+
+  // English case:
   const valueRegEx = /[0-9]{1,2}/;
   const suffixRegEx = /[a-z]{2}/; // ie, (st, nd, rd, th)
-
   const indicatorValue = valueRegEx.exec(indicatorValueWithSuffix);
   const ordinalSuffix = suffixRegEx.exec(indicatorValueWithSuffix);
 

client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx

@@ -5,7 +5,7 @@ import {Link as TrussLink} from '@trussworks/react-uswds';
 import {IDefineMessage} from '../../data/copy/common';
 
 interface ILinkTypeWrapper {
-    linkText?: string;
+    linkText?: string | JSX.Element;
     internal?: boolean;
     url: string | IDefineMessage;
     openUrlNewTab?: boolean;