Port over WarningPanel component (#547)

* Port over WarningPanel component

* Create WarningPanel.test.js

* More stories and tests

* Simplified example message

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 (
+      <div className={classes.message}>
+        <div className={classes.header}>
+          <ErrorOutlineStyled />
+          <Typography className={classes.headerText} variant="subtitle1">
+            {title}
+          </Typography>
+        </div>
+        {message && (
+          <Typography className={classes.messageText}>{message}</Typography>
+        )}
+        {children}
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(WarningPanel);

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 = () => (
+  <WarningPanel
+    title="Example Warning Title"
+    message={
+      <>
+        This example entity is missing something. If this is unexpected, please
+        make sure you have set up everything correctly by following{' '}
+        <Link href="http://example.com">this guide</Link>.
+      </>
+    }
+  />
+);
+
+export const Children = () => (
+  <WarningPanel title="Example Warning Title">
+    <Button variant="outlined" color="primary">
+      Supports custom children - for example this button
+    </Button>
+  </WarningPanel>
+);

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('<WarningPanel />', () => {
+  it('renders without exploding', () => {
+    const { getByText } = render(
+      wrapInThemedTestApp(<WarningPanel {...minProps} />),
+    );
+    expect(getByText('Mock title')).toBeInTheDocument();
+  });
+
+  it('renders message and children', () => {
+    const { getByText } = render(
+      wrapInThemedTestApp(<WarningPanel {...minProps}>children</WarningPanel>),
+    );
+    expect(getByText('Some more info')).toBeInTheDocument();
+    expect(getByText('children')).toBeInTheDocument();
+  });
+});

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';

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';