pass new inverse prop to Guage

Signed-off-by: Andrew Shirley <andrew@als-bi.com>

.changeset/rare-mayflies-remain.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Pass `inverse` prop to Guage from GuageCard

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

@@ -45,6 +45,9 @@ export const Default = () => (
     <Grid item>
       <GaugeCard title="Progress" progress={0.89} />
     </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" inverse progress={0.2} />
+    </Grid>
   </Wrapper>
 );
 
@@ -67,6 +70,14 @@ export const Subhead = () => (
         progress={0.89}
       />
     </Grid>
+    <Grid item>
+      <GaugeCard
+        title="Progress"
+        subheader="With a subheader"
+        inverse
+        progress={0.2}
+      />
+    </Grid>
   </Wrapper>
 );
 
@@ -81,5 +92,8 @@ export const LinkInFooter = () => (
     <Grid item>
       <GaugeCard title="Progress" deepLink={linkInfo} progress={0.89} />
     </Grid>
+    <Grid item>
+      <GaugeCard title="Progress" deepLink={linkInfo} inverse progress={0.2} />
+    </Grid>
   </Wrapper>
 );

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

@@ -26,6 +26,7 @@ type Props = {
   variant?: InfoCardVariants;
   /** Progress in % specified as decimal, e.g. "0.23" */
   progress: number;
+  inverse?: boolean;
   deepLink?: BottomLinkProps;
 };
 
@@ -38,7 +39,7 @@ const useStyles = makeStyles({
 
 export const GaugeCard = (props: Props) => {
   const classes = useStyles(props);
-  const { title, subheader, progress, deepLink, variant } = props;
+  const { title, subheader, progress, inverse, deepLink, variant } = props;
 
   return (
     <div className={classes.root}>
@@ -48,7 +49,7 @@ export const GaugeCard = (props: Props) => {
         deepLink={deepLink}
         variant={variant}
       >
-        <Gauge value={progress} />
+        <Gauge value={progress} inverse={inverse}/>
       </InfoCard>
     </div>
   );