Modify exported getProgressColor to accept arguments object

Signed-off-by: James Turley <jamesturley@gocardless.com>

packages/core-components/src/components/ProgressBars/Gauge.test.tsx

@@ -56,16 +56,26 @@ describe('<Gauge />', () => {
   };
 
   it('colors the progress correctly', () => {
-    expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd');
-    expect(getProgressColor(palette, 10)).toBe(error);
-    expect(getProgressColor(palette, 50)).toBe(warning);
-    expect(getProgressColor(palette, 90)).toBe(ok);
+    expect(getProgressColor({ palette, value: 'Not a Number' as any })).toBe(
+      '#ddd',
+    );
+    expect(getProgressColor({ palette, value: 10 })).toBe(error);
+    expect(getProgressColor({ palette, value: 50 })).toBe(warning);
+    expect(getProgressColor({ palette, value: 90 })).toBe(ok);
   });
 
   it('colors the inverse progress correctly', () => {
-    expect(getProgressColor(palette, 'Not a Number' as any)).toBe('#ddd');
-    expect(getProgressColor(palette, 10, true)).toBe(ok);
-    expect(getProgressColor(palette, 50, true)).toBe(warning);
-    expect(getProgressColor(palette, 90, true)).toBe(error);
+    expect(
+      getProgressColor({
+        palette,
+        value: 'Not a Number' as any,
+        inverse: true,
+      }),
+    ).toBe('#ddd');
+    expect(getProgressColor({ palette, value: 10, inverse: true })).toBe(ok);
+    expect(getProgressColor({ palette, value: 50, inverse: true })).toBe(
+      warning,
+    );
+    expect(getProgressColor({ palette, value: 90, inverse: true })).toBe(error);
   });
 });

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

@@ -55,12 +55,16 @@ type Props = {
   getColor?: GetColor;
 };
 
-export type GetColor = (args: {
+type GetColorArgs = {
   palette: BackstageTheme['palette'];
   value: number;
   inverse?: boolean;
   max?: number;
-}) => string | BackstageTheme['palette']['error'];
+};
+
+export type GetColor = (
+  args: GetColorArgs,
+) => string | BackstageTheme['palette']['error'];
 
 const defaultProps = {
   fractional: true,
@@ -69,12 +73,12 @@ const defaultProps = {
   max: 100,
 };
 
-export function getProgressColor(
-  palette: BackstageTheme['palette'],
-  value: number,
-  inverse?: boolean,
-  max?: number,
-) {
+export const getProgressColor: GetColor = ({
+  palette,
+  value,
+  inverse,
+  max,
+}) => {
   if (isNaN(value)) {
     return '#ddd';
   }
@@ -89,18 +93,11 @@ export function getProgressColor(
   }
 
   return palette.status.ok;
-}
-
-export const defaultGetProgressColor: GetColor = ({
-  palette,
-  value,
-  inverse,
-  max,
-}) => getProgressColor(palette, value, inverse, max);
+};
 
 /** @public */
 export function Gauge(props: Props) {
-  const { getColor = defaultGetProgressColor } = props;
+  const { getColor = getProgressColor } = props;
   const classes = useStyles(props);
   const { palette } = useTheme<BackstageTheme>();
   const { value, fractional, inverse, unit, max } = {

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

@@ -20,7 +20,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 // @ts-ignore
 import { Line } from 'rc-progress';
 import { BackstageTheme } from '@backstage/theme';
-import { defaultGetProgressColor, GetColor } from './Gauge';
+import { getProgressColor, GetColor } from './Gauge';
 
 type Props = {
   /**
@@ -31,7 +31,7 @@ type Props = {
 };
 
 export function LinearGauge(props: Props) {
-  const { value, getColor = defaultGetProgressColor } = props;
+  const { value, getColor = getProgressColor } = props;
   const { palette } = useTheme<BackstageTheme>();
   if (isNaN(value)) {
     return null;