fix: Apply linter <span> rule

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

plugins/cicd-statistics/src/charts/status-chart.tsx

@@ -118,9 +118,9 @@ export function StatusChart(props: StatusChartProps) {
         : percentOrCount;
 
       return [
-        <span>
+        <Typography component="span">
           {label}: {valueText}
-        </span>,
+        </Typography>,
         null,
       ];
     };

plugins/cicd-statistics/src/components/utils.tsx

@@ -18,6 +18,7 @@ import React, { CSSProperties } from 'react';
 import { DateTime, Duration } from 'luxon';
 import humanizeDuration from 'humanize-duration';
 import { capitalize } from 'lodash';
+import Typography from '@material-ui/core/Typography';
 
 const infoText: CSSProperties = { color: 'InfoText' };
 
@@ -60,11 +61,19 @@ function formatDateTimeShort(milliseconds: number) {
 }
 
 export function labelFormatter(epoch: number) {
-  return <span style={infoText}>{formatDateTimeShort(epoch)}</span>;
+  return (
+    <Typography component="span" style={infoText}>
+      {formatDateTimeShort(epoch)}
+    </Typography>
+  );
 }
 
 export function labelFormatterWithoutTime(epoch: number) {
-  return <span style={infoText}>{formatDateShort(epoch)}</span>;
+  return (
+    <Typography component="span" style={infoText}>
+      {formatDateShort(epoch)}
+    </Typography>
+  );
 }
 
 export function tickFormatterX(epoch: number) {
@@ -88,12 +97,12 @@ export function tickFormatterY(duration: number) {
 
 export function tooltipValueFormatter(durationOrCount: number, name: string) {
   return [
-    <span style={infoText}>
+    <Typography component="span" style={infoText}>
       {capitalize(name)}:{' '}
       {name.endsWith(' count')
         ? durationOrCount
         : formatDuration(durationOrCount)}
-    </span>,
+    </Typography>,
     null,
   ];
 }