paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

Merge pull request #2303 from iamrajiv/2227

Browse Source 
Renamed ProgressBar components to *Gauge
This commit is contained in:
Patrik Oldsberg
2020-09-15 20:23:16 +02:00
committed by GitHub
parent 124663682f 28c01d1617
commit 3e50f8ab74
9 changed files with 41 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/ProgressBars/ProgressCard.stories.tsx → packages/core/src/components/ProgressBars/GaugeCard.stories.tsx
+11 -15
View File
@@ -15,26 +15,26 @@
*/
import React from 'react';
import { ProgressCard } from './ProgressCard';
import { GaugeCard } from './GaugeCard';
import { Grid } from '@material-ui/core';
const linkInfo = { title: 'Go to XYZ Location', link: '#' };
export default {
title: 'Progress Card',
component: ProgressCard,
component: GaugeCard,
};
export const Default = () => (
<Grid container spacing={2}>
<Grid item>
<ProgressCard title="Progress" progress={0.3} />
<GaugeCard title="Progress" progress={0.3} />
</Grid>
<Grid item>
<ProgressCard title="Progress" progress={0.57} />
<GaugeCard title="Progress" progress={0.57} />
</Grid>
<Grid item>
<ProgressCard title="Progress" progress={0.89} />
<GaugeCard title="Progress" progress={0.89} />
</Grid>
</Grid>
);
@@ -42,21 +42,17 @@ export const Default = () => (
export const Subhead = () => (
<Grid container spacing={2}>
<Grid item>
<ProgressCard
title="Progress"
subheader="With a subheader"
progress={0.3}
/>
<GaugeCard title="Progress" subheader="With a subheader" progress={0.3} />
</Grid>
<Grid item>
<ProgressCard
<GaugeCard
title="Progress"
subheader="With a subheader"
progress={0.57}
/>
</Grid>
<Grid item>
<ProgressCard
<GaugeCard
title="Progress"
subheader="With a subheader"
progress={0.89}
@@ -68,13 +64,13 @@ export const Subhead = () => (
export const LinkInFooter = () => (
<Grid container spacing={2}>
<Grid item>
<ProgressCard title="Progress" deepLink={linkInfo} progress={0.3} />
<GaugeCard title="Progress" deepLink={linkInfo} progress={0.3} />
</Grid>
<Grid item>
<ProgressCard title="Progress" deepLink={linkInfo} progress={0.57} />
<GaugeCard title="Progress" deepLink={linkInfo} progress={0.57} />
</Grid>
<Grid item>
<ProgressCard title="Progress" deepLink={linkInfo} progress={0.89} />
<GaugeCard title="Progress" deepLink={linkInfo} progress={0.89} />
</Grid>
</Grid>
);
packages/core/src/components/ProgressBars/ProgressCard.test.jsx → packages/core/src/components/ProgressBars/GaugeCard.test.jsx
+6 -8
View File
@@ -18,32 +18,30 @@ import React from 'react';
import { render } from '@testing-library/react';
import { wrapInTestApp } from '@backstage/test-utils';
import { ProgressCard } from './ProgressCard';
import { GaugeCard } from './GaugeCard';
const minProps = { title: 'Tingle upgrade', progress: 0.12 };
describe('<ProgressCard />', () => {
describe('<GaugeCard />', () => {
it('renders without exploding', () => {
const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
expect(getByText(/Tingle.*/)).toBeInTheDocument();
});
it('renders progress and title', () => {
const { getByText } = render(wrapInTestApp(<ProgressCard {...minProps} />));
const { getByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
expect(getByText(/Tingle.*/)).toBeInTheDocument();
expect(getByText(/12%.*/)).toBeInTheDocument();
});
it('does not render deepLink', () => {
const { queryByText } = render(
wrapInTestApp(<ProgressCard {...minProps} />),
);
const { queryByText } = render(wrapInTestApp(<GaugeCard {...minProps} />));
expect(queryByText('View more')).not.toBeInTheDocument();
});
it('handles invalid numbers', () => {
const badProps = { title: 'Tingle upgrade', progress: 'hejjo' };
const { getByText } = render(wrapInTestApp(<ProgressCard {...badProps} />));
const { getByText } = render(wrapInTestApp(<GaugeCard {...badProps} />));
expect(getByText(/N\/A.*/)).toBeInTheDocument();
});
});
packages/core/src/components/ProgressBars/ProgressCard.tsx → packages/core/src/components/ProgressBars/GaugeCard.tsx
+3 -3
View File
@@ -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 { CircleProgress } from './CircleProgress';
import { GaugeProgress } from './GaugeProgress';
type Props = {
title: string;
@@ -36,7 +36,7 @@ const useStyles = makeStyles({
},
});
export const ProgressCard: FC<Props> = props => {
export const GaugeCard: FC<Props> = props => {
const classes = useStyles(props);
const { title, subheader, progress, deepLink, variant } = props;
@@ -48,7 +48,7 @@ export const ProgressCard: FC<Props> = props => {
deepLink={deepLink}
variant={variant}
>
<CircleProgress value={progress} />
<GaugeProgress value={progress} />
</InfoCard>
</div>
);
packages/core/src/components/ProgressBars/CircleProgress.test.jsx → packages/core/src/components/ProgressBars/GaugeProgress.test.jsx
+6 -6
View File
@@ -17,32 +17,32 @@
import React from 'react';
import { render } from '@testing-library/react';
import { wrapInTestApp } from '@backstage/test-utils';
import { CircleProgress, getProgressColor } from './CircleProgress';
import { GaugeProgress, getProgressColor } from './GaugeProgress';
describe('<CircleProgress />', () => {
describe('<GaugeProgress />', () => {
it('renders without exploding', () => {
const { getByText } = render(
wrapInTestApp(<CircleProgress value={10} fractional={false} />),
wrapInTestApp(<GaugeProgress value={10} fractional={false} />),
);
getByText('10%');
});
it('handles fractional prop', () => {
const { getByText } = render(
wrapInTestApp(<CircleProgress value={0.1} fractional />),
wrapInTestApp(<GaugeProgress value={0.1} fractional />),
);
getByText('10%');
});
it('handles max prop', () => {
const { getByText } = render(
wrapInTestApp(<CircleProgress value={1} max={10} fractional={false} />),
wrapInTestApp(<GaugeProgress value={1} max={10} fractional={false} />),
);
getByText('1%');
});
it('handles unit prop', () => {
const { getByText } = render(
wrapInTestApp(<CircleProgress value={10} fractional={false} unit="m" />),
wrapInTestApp(<GaugeProgress value={10} fractional={false} unit="m" />),
);
getByText('10m');
});
packages/core/src/components/ProgressBars/CircleProgress.tsx → packages/core/src/components/ProgressBars/GaugeProgress.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export function getProgressColor(
return palette.status.ok;
}
export const CircleProgress: FC<Props> = props => {
export const GaugeProgress: FC<Props> = props => {
const classes = useStyles(props);
const theme = useTheme<BackstageTheme>();
const { value, fractional, inverse, unit, max } = {
packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx → packages/core/src/components/ProgressBars/LinearGauge.stories.tsx
+6 -6
View File
@@ -15,29 +15,29 @@
*/
import React from 'react';
import { HorizontalProgress } from './HorizontalProgress';
import { LinearGauge } from './LinearGauge';
const containerStyle = { width: 300 };
export default {
title: 'HorizontalProgress',
component: HorizontalProgress,
title: 'LinearGauge',
component: LinearGauge,
};
export const Default = () => (
<div style={containerStyle}>
<HorizontalProgress value={0.8} />
<LinearGauge value={0.8} />
</div>
);
export const MediumProgress = () => (
<div style={containerStyle}>
<HorizontalProgress value={0.5} />
<LinearGauge value={0.5} />
</div>
);
export const LowProgress = () => (
<div style={containerStyle}>
<HorizontalProgress value={0.2} />
<LinearGauge value={0.2} />
</div>
);
packages/core/src/components/ProgressBars/HorizontalProgress.tsx → packages/core/src/components/ProgressBars/LinearGauge.tsx
+2 -2
View File
@@ -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 './CircleProgress';
import { getProgressColor } from './GaugeProgress';
type Props = {
/**
@@ -28,7 +28,7 @@ type Props = {
value: number;
};
export const HorizontalProgress: FC<Props> = ({ value }) => {
export const LinearGauge: FC<Props> = ({ value }) => {
const theme = useTheme<BackstageTheme>();
if (isNaN(value)) {
return null;
packages/core/src/components/ProgressBars/index.ts
+3 -3
View File
@@ -14,6 +14,6 @@
* limitations under the License.
*/
export { ProgressCard } from './ProgressCard';
export { CircleProgress } from './CircleProgress';
export { HorizontalProgress } from './HorizontalProgress';
export { GaugeCard } from './GaugeCard';
export { GaugeProgress } from './GaugeProgress';
export { LinearGauge } from './LinearGauge';
packages/core/src/layout/Page/Page.stories.tsx
+3 -3
View File
@@ -30,7 +30,7 @@ import {
Table,
StatusOK,
TableColumn,
ProgressCard,
GaugeCard,
TrendLine,
} from '../../components';
import { Box, Typography, Link, Chip, Grid } from '@material-ui/core';
@@ -120,14 +120,14 @@ const DataGrid = () => (
direction="row"
>
<Grid item xs={6}>
<ProgressCard
<GaugeCard
title="GKE Usage Score"
subheader="This should be above 75%"
progress={0.87}
/>
</Grid>
<Grid item xs={6}>
<ProgressCard
<GaugeCard
title="Deployment Score"
subheader="This should be above 40%"
progress={0.58}