From 47b17514e39cb5db7b20dfbaa8314be1ad8a1ff5 Mon Sep 17 00:00:00 2001 From: Rajiv Ranjan Singh Date: Tue, 15 Sep 2020 21:48:43 +0530 Subject: [PATCH] updated components import --- .../src/components/ProgressBars/.DS_Store | Bin 0 -> 6148 bytes .../ProgressBars/GaugeCard.stories.tsx | 76 +++++++++++++ .../ProgressBars/GaugeCard.test.jsx | 47 ++++++++ .../ProgressBars/GaugeProgress.test.jsx | 68 +++++++++++ .../components/ProgressBars/GaugeProgress.tsx | 106 ++++++++++++++++++ .../ProgressBars/LinearGauge.stories.tsx | 43 +++++++ 6 files changed, 340 insertions(+) create mode 100644 packages/core/src/components/ProgressBars/.DS_Store create mode 100644 packages/core/src/components/ProgressBars/GaugeCard.stories.tsx create mode 100644 packages/core/src/components/ProgressBars/GaugeCard.test.jsx create mode 100644 packages/core/src/components/ProgressBars/GaugeProgress.test.jsx create mode 100644 packages/core/src/components/ProgressBars/GaugeProgress.tsx create mode 100644 packages/core/src/components/ProgressBars/LinearGauge.stories.tsx diff --git a/packages/core/src/components/ProgressBars/.DS_Store b/packages/core/src/components/ProgressBars/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 ( + + + + + + + + + + + +); + +export const Subhead = () => ( + + + + + + + + + + + +); + +export const LinkInFooter = () => ( + + + + + + + + + + + +); diff --git a/packages/core/src/components/ProgressBars/GaugeCard.test.jsx b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx new file mode 100644 index 0000000000..27ef0bb188 --- /dev/null +++ b/packages/core/src/components/ProgressBars/GaugeCard.test.jsx @@ -0,0 +1,47 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { render } from '@testing-library/react'; +import { wrapInTestApp } from '@backstage/test-utils'; + +import { GaugeCard } from './GaugeCard'; + +const minProps = { title: 'Tingle upgrade', progress: 0.12 }; + +describe('', () => { + it('renders without exploding', () => { + const { getByText } = render(wrapInTestApp()); + expect(getByText(/Tingle.*/)).toBeInTheDocument(); + }); + + it('renders progress and title', () => { + const { getByText } = render(wrapInTestApp()); + expect(getByText(/Tingle.*/)).toBeInTheDocument(); + expect(getByText(/12%.*/)).toBeInTheDocument(); + }); + + it('does not render deepLink', () => { + const { queryByText } = render(wrapInTestApp()); + expect(queryByText('View more')).not.toBeInTheDocument(); + }); + + it('handles invalid numbers', () => { + const badProps = { title: 'Tingle upgrade', progress: 'hejjo' }; + const { getByText } = render(wrapInTestApp()); + expect(getByText(/N\/A.*/)).toBeInTheDocument(); + }); +}); diff --git a/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx new file mode 100644 index 0000000000..778abdf12c --- /dev/null +++ b/packages/core/src/components/ProgressBars/GaugeProgress.test.jsx @@ -0,0 +1,68 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { render } from '@testing-library/react'; +import { wrapInTestApp } from '@backstage/test-utils'; +import { GaugeProgress, getProgressColor } from './GaugeProgress'; + +describe('', () => { + it('renders without exploding', () => { + const { getByText } = render( + wrapInTestApp(), + ); + getByText('10%'); + }); + it('handles fractional prop', () => { + const { getByText } = render( + wrapInTestApp(), + ); + getByText('10%'); + }); + + it('handles max prop', () => { + const { getByText } = render( + wrapInTestApp(), + ); + getByText('1%'); + }); + + it('handles unit prop', () => { + const { getByText } = render( + wrapInTestApp(), + ); + getByText('10m'); + }); + + const ok = '#111'; + const warning = '#222'; + const error = '#333'; + const palette = { status: { ok, warning, error } }; + + it('colors the progress correctly', () => { + expect(getProgressColor(palette)).toBe('#ddd'); + expect(getProgressColor(palette, 10)).toBe(error); + expect(getProgressColor(palette, 50)).toBe(warning); + expect(getProgressColor(palette, 90)).toBe(ok); + }); + + it('colors the inverse progress correctly', () => { + expect(getProgressColor(palette)).toBe('#ddd'); + expect(getProgressColor(palette, 10, true)).toBe(ok); + expect(getProgressColor(palette, 50, true)).toBe(warning); + expect(getProgressColor(palette, 90, true)).toBe(error); + }); +}); diff --git a/packages/core/src/components/ProgressBars/GaugeProgress.tsx b/packages/core/src/components/ProgressBars/GaugeProgress.tsx new file mode 100644 index 0000000000..14776ed431 --- /dev/null +++ b/packages/core/src/components/ProgressBars/GaugeProgress.tsx @@ -0,0 +1,106 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { makeStyles, useTheme } from '@material-ui/core'; +import { BackstageTheme } from '@backstage/theme'; +import { Circle } from 'rc-progress'; +import React, { FC } from 'react'; + +const useStyles = makeStyles(theme => ({ + root: { + position: 'relative', + lineHeight: 0, + }, + overlay: { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -60%)', + fontSize: 45, + fontWeight: 'bold', + color: theme.palette.textContrast, + }, + circle: { + width: '80%', + transform: 'translate(10%, 0)', + }, + colorUnknown: {}, +})); + +type Props = { + value: number; + fractional?: boolean; + inverse?: boolean; + unit?: string; + max?: number; +}; + +const defaultProps = { + fractional: true, + inverse: false, + unit: '%', + max: 100, +}; + +export function getProgressColor( + palette: BackstageTheme['palette'], + value: number, + inverse?: boolean, + max?: number, +) { + if (isNaN(value)) { + return '#ddd'; + } + + const actualMax = max ? max : defaultProps.max; + const actualValue = inverse ? actualMax - value : value; + + if (actualValue < actualMax / 3) { + return palette.status.error; + } else if (actualValue < actualMax * (2 / 3)) { + return palette.status.warning; + } + + return palette.status.ok; +} + +export const GaugeProgress: FC = props => { + const classes = useStyles(props); + const theme = useTheme(); + const { value, fractional, inverse, unit, max } = { + ...defaultProps, + ...props, + }; + + const asPercentage = fractional ? Math.round(value * max) : value; + const asActual = max !== 100 ? Math.round(value) : asPercentage; + + return ( +
+ +
+ {isNaN(value) ? 'N/A' : `${asActual}${unit}`} +
+
+ ); +}; diff --git a/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx new file mode 100644 index 0000000000..c4492986b6 --- /dev/null +++ b/packages/core/src/components/ProgressBars/LinearGauge.stories.tsx @@ -0,0 +1,43 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { LinearGauge } from './LinearGauge'; + +const containerStyle = { width: 300 }; + +export default { + title: 'LinearGauge', + component: LinearGauge, +}; + +export const Default = () => ( +
+ +
+); + +export const MediumProgress = () => ( +
+ +
+); + +export const LowProgress = () => ( +
+ +
+);