feat: Added subheaderTypographyProps prop to InfoCard, allowing it to be used from GaugeCard. Also made GaugeCard 'small' variant to have smaller text

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx

@@ -234,6 +234,7 @@ export const Small = () => (
         alignGauge="bottom"
         size="small"
         title="Progress"
+        subheader="With a subheader"
         progress={0.57}
       />
     </Grid>

packages/core-components/src/components/ProgressBars/GaugeCard.tsx

@@ -91,13 +91,12 @@ export function GaugeCard(props: Props) {
         variant={variant}
         alignContent={alignGauge}
         icon={icon}
-        titleTypographyProps={
-          size === 'small'
-            ? {
-                variant: 'h6',
-              }
-            : undefined
-        }
+        titleTypographyProps={{
+          ...(size === 'small' ? { variant: 'subtitle2' } : undefined),
+        }}
+        subheaderTypographyProps={{
+          ...(size === 'small' ? { variant: 'body2' } : undefined),
+        }}
       >
         <Gauge {...gaugeProps} size={size} />
       </InfoCard>

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -155,6 +155,7 @@ export type Props = {
   className?: string;
   noPadding?: boolean;
   titleTypographyProps?: object;
+  subheaderTypographyProps?: object;
 };
 
 /**
@@ -185,6 +186,7 @@ export function InfoCard(props: Props): JSX.Element {
     className,
     noPadding,
     titleTypographyProps,
+    subheaderTypographyProps,
   } = props;
   const classes = useStyles();
   /**
@@ -246,6 +248,7 @@ export function InfoCard(props: Props): JSX.Element {
             action={action}
             style={{ ...headerStyle }}
             titleTypographyProps={titleTypographyProps}
+            subheaderTypographyProps={subheaderTypographyProps}
             {...headerProps}
           />
         )}