[Storybook] Improve Status stories (#699)

* [Storybook] Imrove Status stories

* Remove duplicate classes

packages/core/src/components/Status/Status.stories.tsx

@@ -24,44 +24,72 @@ import {
   StatusRunning,
   StatusWarning,
 } from './Status';
+import SortableTable from 'components/SortableTable';
+import InfoCard from 'layout/InfoCard';
 
 export default {
   title: 'Status',
   component: StatusOK,
 };
 
-export const statusOK = () => (
-  <>
-    <StatusOK /> Status OK
-  </>
-);
-export const statusWarning = () => (
-  <>
-    <StatusWarning /> Status Warning
-  </>
-);
-export const statusError = () => (
-  <>
-    <StatusError /> Status Error
-  </>
-);
-export const statusFailed = () => (
-  <>
-    <StatusFailed /> Status Failed
-  </>
-);
-export const statusPending = () => (
-  <>
-    <StatusPending /> Status Pending
-  </>
-);
-export const statusRunning = () => (
-  <>
-    <StatusRunning /> Status Running
-  </>
-);
-export const statusNA = () => (
-  <>
-    <StatusNA /> Status NA
-  </>
+const data = [
+  {
+    status: <StatusOK />,
+    label: 'OK',
+    usage: 'Deployment successful',
+  },
+  {
+    status: <StatusWarning />,
+    label: 'Warning',
+    usage: 'CPU utilization at 90%',
+  },
+  {
+    status: <StatusError />,
+    label: 'Error',
+    usage: 'Service could not be created',
+  },
+  {
+    status: <StatusFailed />,
+    label: 'Failed',
+    usage: 'Build for PR #34 failed',
+  },
+  {
+    status: <StatusPending />,
+    label: 'Pending',
+    usage: 'Job is waiting',
+  },
+  {
+    status: <StatusRunning />,
+    label: 'Running',
+    usage: 'Job is running',
+  },
+  {
+    status: <StatusNA />,
+    label: 'N/A',
+    usage: 'Not sure what to do',
+  },
+];
+
+const columns = [
+  { id: 'status', label: 'Status' },
+  { id: 'label', label: 'Label' },
+  { id: 'usage', label: 'Example usage' },
+];
+
+const containerStyle = { width: 600 };
+
+export const Default = () => (
+  <div style={containerStyle}>
+    <InfoCard title="Available status types">
+      <SortableTable data={data} columns={columns} />
+    </InfoCard>
+  </div>
 );
+
+export const statusOK = () => <StatusOK />;
+export const statusWarning = () => <StatusWarning />;
+export const statusError = () => <StatusError />;
+export const statusFailed = () => <StatusFailed />;
+export const statusPending = () => <StatusPending />;
+export const statusRunning = () => <StatusRunning />;
+export const statusNA = () => <StatusNA />;

packages/core/src/components/Status/Status.tsx

@@ -34,6 +34,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     backgroundColor: theme.palette.status.warning,
   },
   error: {
+    // Use same for Failed status.
     width: '0',
     height: '0',
     borderLeft: '7px solid transparent',
@@ -43,9 +44,6 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   pending: {
     backgroundColor: theme.palette.status.pending,
   },
-  failed: {
-    backgroundColor: 'rgba(245, 155, 35, 0.5)',
-  },
   running: {
     animation: '$blink 0.8s step-start 0s infinite',
     backgroundColor: theme.palette.status.running,
@@ -122,7 +120,7 @@ export const StatusFailed: FC<{}> = props => {
   const classes = useStyles(props);
   return (
     <span
-      className={classNames(classes.status, classes.failed)}
+      className={classNames(classes.status, classes.error)}
       aria-label="Status failed"
       {...props}
     />

packages/core/src/components/TrendLine/TrendLine.stories.tsx

@@ -24,7 +24,7 @@ export default {
   component: TrendLine,
 };
 
-const containerStyle = { width: 600 };
+const containerStyle = { width: 700 };
 
 const data = [
   {
@@ -66,9 +66,11 @@ const columns = [
 ];
 
 export const Default = () => (
-  <InfoCard style={containerStyle} title="Trends over time">
-    <SortableTable data={data} columns={columns} />
-  </InfoCard>
+  <div style={containerStyle}>
+    <InfoCard title="Trends over time">
+      <SortableTable data={data} columns={columns} />
+    </InfoCard>
+  </div>
 );
 
 export const TrendingMix = () => (