diff --git a/.changeset/spotty-ravens-perform.md b/.changeset/spotty-ravens-perform.md new file mode 100644 index 0000000000..507561c11c --- /dev/null +++ b/.changeset/spotty-ravens-perform.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Adds icons to status component diff --git a/packages/core-components/src/components/Status/Status.test.tsx b/packages/core-components/src/components/Status/Status.test.tsx index c1e1d42af2..34f1a587bd 100644 --- a/packages/core-components/src/components/Status/Status.test.tsx +++ b/packages/core-components/src/components/Status/Status.test.tsx @@ -28,42 +28,58 @@ import { describe('', () => { it('renders without exploding', async () => { - const { getByLabelText } = await renderInTestApp(); + const { getByLabelText, getByTestId } = await renderInTestApp(); expect(getByLabelText('Status ok')).toBeInTheDocument(); + expect(getByTestId('status-ok')).toBeInTheDocument(); }); }); describe('', () => { it('renders without exploding', async () => { - const { getByLabelText } = await renderInTestApp(); + const { getByLabelText, getByTestId } = await renderInTestApp( + , + ); expect(getByLabelText('Status warning')).toBeInTheDocument(); + expect(getByTestId('status-warning')).toBeInTheDocument(); }); }); describe('', () => { it('renders without exploding', async () => { - const { getByLabelText } = await renderInTestApp(); + const { getByLabelText, getByTestId } = await renderInTestApp( + , + ); expect(getByLabelText('Status error')).toBeInTheDocument(); + expect(getByTestId('status-error')).toBeInTheDocument(); }); }); describe('', () => { it('renders without exploding', async () => { - const { getByLabelText } = await renderInTestApp(); + const { getByLabelText, getByTestId } = await renderInTestApp( + , + ); expect(getByLabelText('Status pending')).toBeInTheDocument(); + expect(getByTestId('status-pending')).toBeInTheDocument(); }); }); describe('', () => { it('renders without exploding', async () => { - const { getByLabelText } = await renderInTestApp(); + const { getByLabelText, getByTestId } = await renderInTestApp( + , + ); expect(getByLabelText('Status running')).toBeInTheDocument(); + expect(getByTestId('status-running')).toBeInTheDocument(); }); }); describe('', () => { it('renders without exploding', async () => { - const { getByLabelText } = await renderInTestApp(); + const { getByLabelText, getByTestId } = await renderInTestApp( + , + ); expect(getByLabelText('Status aborted')).toBeInTheDocument(); + expect(getByTestId('status-aborted')).toBeInTheDocument(); }); }); diff --git a/packages/core-components/src/components/Status/Status.tsx b/packages/core-components/src/components/Status/Status.tsx index 615eed6aec..63e3d3d3a6 100644 --- a/packages/core-components/src/components/Status/Status.tsx +++ b/packages/core-components/src/components/Status/Status.tsx @@ -16,8 +16,14 @@ import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; +import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; +import WarningOutline from '@material-ui/icons/ReportProblemOutlined'; +import ErrorOutline from '@material-ui/icons/ErrorOutline'; import classNames from 'classnames'; import React, { PropsWithChildren } from 'react'; +import { PendingIcon } from './icons/PendingIcon'; +import { RunningIcon } from './icons/RunningIcon'; +import { AbortedIcon } from './icons/AbortedIcon'; export type StatusClassKey = | 'status' @@ -32,123 +38,185 @@ const useStyles = makeStyles( theme => ({ status: { fontWeight: theme.typography.fontWeightMedium, - '&::before': { - width: '0.7em', - height: '0.7em', - display: 'inline-block', - marginRight: theme.spacing(1), - borderRadius: '50%', - content: '""', - }, + alignItems: 'baseline', + display: 'flex', + }, + statusIcon: { + flexShrink: 0, + position: 'relative', + top: '0.125em', + marginRight: theme.spacing(1), + }, + statusIconSize: { + width: '0.8em', + height: '0.8em', + }, + statusIconSizeForImg: { + width: '1.2em', + height: '1.2em', }, ok: { - '&::before': { - backgroundColor: theme.palette.status.ok, - }, + fill: theme.palette.status.ok || '#3E8635', }, warning: { - '&::before': { - backgroundColor: theme.palette.status.warning, - }, + fill: theme.palette.status.warning || '#F0AB00', }, error: { - '&::before': { - backgroundColor: theme.palette.status.error, - }, + fill: theme.palette.status.error || '#C9190B', }, pending: { - '&::before': { - backgroundColor: theme.palette.status.pending, - }, + fill: theme.palette.status.aborted || '#6A6E73', }, running: { - '&::before': { - backgroundColor: theme.palette.status.running, - }, + fill: theme.palette.status.aborted || '#6A6E73', }, aborted: { - '&::before': { - backgroundColor: theme.palette.status.aborted, - }, + fill: theme.palette.status.aborted || '#6A6E73', }, }), { name: 'BackstageStatus' }, ); export function StatusOK(props: PropsWithChildren<{}>) { - const classes = useStyles(props); + const { children, ...otherProps } = props; + const classes = useStyles(otherProps); return ( ); } export function StatusWarning(props: PropsWithChildren<{}>) { - const classes = useStyles(props); + const { children, ...otherProps } = props; + const classes = useStyles(otherProps); return ( ); } export function StatusError(props: PropsWithChildren<{}>) { - const classes = useStyles(props); + const { children, ...otherProps } = props; + const classes = useStyles(otherProps); return ( ); } export function StatusPending(props: PropsWithChildren<{}>) { - const classes = useStyles(props); + const { children, ...otherProps } = props; + const classes = useStyles(otherProps); return ( ); } export function StatusRunning(props: PropsWithChildren<{}>) { - const classes = useStyles(props); + const { children, ...otherProps } = props; + const classes = useStyles(otherProps); return ( ); } export function StatusAborted(props: PropsWithChildren<{}>) { - const classes = useStyles(props); + const { children, ...otherProps } = props; + const classes = useStyles(otherProps); return ( ); } diff --git a/packages/core-components/src/components/Status/icons/AbortedIcon.tsx b/packages/core-components/src/components/Status/icons/AbortedIcon.tsx new file mode 100644 index 0000000000..397f613e4a --- /dev/null +++ b/packages/core-components/src/components/Status/icons/AbortedIcon.tsx @@ -0,0 +1,36 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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 * as React from 'react'; + +export const AbortedIcon = ({ + className, + dataTestId, +}: { + className: string; + dataTestId: string; +}): React.ReactElement => { + return ( + + + + ); +}; diff --git a/packages/core-components/src/components/Status/icons/PendingIcon.tsx b/packages/core-components/src/components/Status/icons/PendingIcon.tsx new file mode 100644 index 0000000000..b98249947b --- /dev/null +++ b/packages/core-components/src/components/Status/icons/PendingIcon.tsx @@ -0,0 +1,36 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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 * as React from 'react'; + +export const PendingIcon = ({ + className, + dataTestId, +}: { + className: string; + dataTestId: string; +}): React.ReactElement => { + return ( + + + + ); +}; diff --git a/packages/core-components/src/components/Status/icons/RunningIcon.tsx b/packages/core-components/src/components/Status/icons/RunningIcon.tsx new file mode 100644 index 0000000000..8477d01bdc --- /dev/null +++ b/packages/core-components/src/components/Status/icons/RunningIcon.tsx @@ -0,0 +1,36 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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 * as React from 'react'; + +export const RunningIcon = ({ + className, + dataTestId, +}: { + className: string; + dataTestId: string; +}): React.ReactElement => { + return ( + + + + ); +};