diff --git a/packages/core/src/components/WarningPanel/WarningPanel.js b/packages/core/src/components/WarningPanel/WarningPanel.js new file mode 100644 index 0000000000..679f7511d8 --- /dev/null +++ b/packages/core/src/components/WarningPanel/WarningPanel.js @@ -0,0 +1,80 @@ +/* + * 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, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Typography, withStyles } from '@material-ui/core'; +import ErrorOutline from '@material-ui/icons/ErrorOutline'; + +const errorOutlineStyles = theme => ({ + root: { + marginRight: theme.spacing(1), + fill: theme.palette.warningText, + }, +}); +const ErrorOutlineStyled = withStyles(errorOutlineStyles)(ErrorOutline); + +const styles = theme => ({ + message: { + display: 'flex', + flexDirection: 'column', + padding: theme.spacing(1.5), + backgroundColor: theme.palette.warningBackground, + color: theme.palette.warningText, + verticalAlign: 'middle', + }, + header: { + display: 'flex', + flexDirection: 'row', + marginBottom: theme.spacing(1), + }, + headerText: { + color: theme.palette.warningText, + }, + messageText: { + color: theme.palette.warningText, + }, +}); + +/** + * WarningPanel. Show a user friendly error message to a user similar to ErrorPanel except that the warning panel + * only shows the warning message to the user + */ +class WarningPanel extends Component { + static propTypes = { + message: PropTypes.node.isRequired, + }; + + render() { + const { classes, title, message, children } = this.props; + return ( +
+
+ + + {title} + +
+ {message && ( + {message} + )} + {children} +
+ ); + } +} + +export default withStyles(styles)(WarningPanel); diff --git a/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx b/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx new file mode 100644 index 0000000000..2fd5395db5 --- /dev/null +++ b/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx @@ -0,0 +1,45 @@ +/* + * 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 WarningPanel from '.'; +import { Link, Button } from '@material-ui/core'; + +export default { + title: 'Warning Panel', + component: WarningPanel, +}; + +export const Default = () => ( + + This example entity is missing something. If this is unexpected, please + make sure you have set up everything correctly by following{' '} + this guide. + + } + /> +); + +export const Children = () => ( + + + +); diff --git a/packages/core/src/components/WarningPanel/WarningPanel.test.js b/packages/core/src/components/WarningPanel/WarningPanel.test.js new file mode 100644 index 0000000000..4094c65a1f --- /dev/null +++ b/packages/core/src/components/WarningPanel/WarningPanel.test.js @@ -0,0 +1,40 @@ +/* + * 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 { wrapInThemedTestApp } from '@backstage/test-utils'; + +import WarningPanel from './WarningPanel'; + +const minProps = { title: 'Mock title', message: 'Some more info' }; + +describe('', () => { + it('renders without exploding', () => { + const { getByText } = render( + wrapInThemedTestApp(), + ); + expect(getByText('Mock title')).toBeInTheDocument(); + }); + + it('renders message and children', () => { + const { getByText } = render( + wrapInThemedTestApp(children), + ); + expect(getByText('Some more info')).toBeInTheDocument(); + expect(getByText('children')).toBeInTheDocument(); + }); +}); diff --git a/packages/core/src/components/WarningPanel/index.js b/packages/core/src/components/WarningPanel/index.js new file mode 100644 index 0000000000..704453fb47 --- /dev/null +++ b/packages/core/src/components/WarningPanel/index.js @@ -0,0 +1,16 @@ +/* + * 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. + */ +export { default } from './WarningPanel'; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 740a4cc803..9153b9fa3b 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -33,3 +33,4 @@ export { default as SupportButton } from './components/SupportButton'; export { default as SortableTable } from './components/SortableTable'; export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular'; export * from './components/Status'; +export { default as WarningPanel } from './components/WarningPanel';