Merge pull request #2774 from jadonwolffs/master

renamed all instances of GuageProgress component to Guage
This commit is contained in:
Patrik Oldsberg
2020-10-06 19:10:09 +02:00
committed by GitHub
6 changed files with 19 additions and 19 deletions
@@ -15,41 +15,41 @@
*/
import React from 'react';
import { GaugeProgress } from './GaugeProgress';
import { Gauge } from './Gauge';
const containerStyle = { width: 300 };
export default {
title: 'GaugeProgress',
component: GaugeProgress,
title: 'Gauge',
component: Gauge,
};
export const Default = () => (
<div style={containerStyle}>
<GaugeProgress value={0.8} />
<Gauge value={0.8} />
</div>
);
export const MediumProgress = () => (
<div style={containerStyle}>
<GaugeProgress value={0.5} />
<Gauge value={0.5} />
</div>
);
export const LowProgress = () => (
<div style={containerStyle}>
<GaugeProgress value={0.2} />
<Gauge value={0.2} />
</div>
);
export const InverseLowProgress = () => (
<div style={containerStyle}>
<GaugeProgress value={0.2} inverse />
<Gauge value={0.2} inverse />
</div>
);
export const AbsoluteProgress = () => (
<div style={containerStyle}>
<GaugeProgress value={89.2} fractional={false} unit="m/s" />
<Gauge value={89.2} fractional={false} unit="m/s" />
</div>
);
@@ -17,32 +17,32 @@
import React from 'react';
import { render } from '@testing-library/react';
import { wrapInTestApp } from '@backstage/test-utils';
import { GaugeProgress, getProgressColor } from './GaugeProgress';
import { Gauge, getProgressColor } from './Gauge';
describe('<GaugeProgress />', () => {
describe('<Gauge />', () => {
it('renders without exploding', () => {
const { getByText } = render(
wrapInTestApp(<GaugeProgress value={10} fractional={false} />),
wrapInTestApp(<Gauge value={10} fractional={false} />),
);
getByText('10%');
});
it('handles fractional prop', () => {
const { getByText } = render(
wrapInTestApp(<GaugeProgress value={0.1} fractional />),
wrapInTestApp(<Gauge value={0.1} fractional />),
);
getByText('10%');
});
it('handles max prop', () => {
const { getByText } = render(
wrapInTestApp(<GaugeProgress value={1} max={10} fractional={false} />),
wrapInTestApp(<Gauge value={1} max={10} fractional={false} />),
);
getByText('1%');
});
it('handles unit prop', () => {
const { getByText } = render(
wrapInTestApp(<GaugeProgress value={10} fractional={false} unit="m" />),
wrapInTestApp(<Gauge value={10} fractional={false} unit="m" />),
);
getByText('10m');
});
@@ -77,7 +77,7 @@ export function getProgressColor(
return palette.status.ok;
}
export const GaugeProgress: FC<Props> = props => {
export const Gauge: FC<Props> = props => {
const classes = useStyles(props);
const theme = useTheme<BackstageTheme>();
const { value, fractional, inverse, unit, max } = {
@@ -18,7 +18,7 @@ import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core';
import { InfoCard } from '../../layout/InfoCard';
import { BottomLinkProps } from '../../layout/BottomLink';
import { GaugeProgress } from './GaugeProgress';
import { Gauge } from './Gauge';
type Props = {
title: string;
@@ -48,7 +48,7 @@ export const GaugeCard: FC<Props> = props => {
deepLink={deepLink}
variant={variant}
>
<GaugeProgress value={progress} />
<Gauge value={progress} />
</InfoCard>
</div>
);
@@ -19,7 +19,7 @@ import { Tooltip, useTheme } from '@material-ui/core';
// @ts-ignore
import { Line } from 'rc-progress';
import { BackstageTheme } from '@backstage/theme';
import { getProgressColor } from './GaugeProgress';
import { getProgressColor } from './Gauge';
type Props = {
/**
@@ -15,5 +15,5 @@
*/
export { GaugeCard } from './GaugeCard';
export { GaugeProgress } from './GaugeProgress';
export { Gauge } from './Gauge';
export { LinearGauge } from './LinearGauge';