From d0d1c2f7ba03df36db136f918217515a7f758f92 Mon Sep 17 00:00:00 2001
From: Andrew Shirley <andrew@als-bi.com>
Date: Tue, 13 Apr 2021 12:12:49 +0100
Subject: [PATCH] pass new inverse prop to Guage

Signed-off-by: Andrew Shirley <andrew@als-bi.com>
---
 .changeset/rare-mayflies-remain.md                 |  5 +++++
 .../components/ProgressBars/GaugeCard.stories.tsx  | 14 ++++++++++++++
 .../core/src/components/ProgressBars/GaugeCard.tsx |  5 +++--
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rare-mayflies-remain.md

diff --git a/.changeset/rare-mayflies-remain.md b/.changeset/rare-mayflies-remain.md
new file mode 100644
index 0000000000..55febfb376
--- /dev/null
+++ b/.changeset/rare-mayflies-remain.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+Pass `inverse` prop to Guage from GuageCard
diff --git a/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
index 982999f8d6..5d54e5eda6 100644
--- a/packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
+++ b/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>
 );
diff --git a/packages/core/src/components/ProgressBars/GaugeCard.tsx b/packages/core/src/components/ProgressBars/GaugeCard.tsx
index 2154619b01..0f0a85e6d4 100644
--- a/packages/core/src/components/ProgressBars/GaugeCard.tsx
+++ b/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>
   );