Add Status and SortableTable to Storybook (#540)

* Add Status component to Storybook

* Add SortableTable

packages/core/src/components/SortableTable.js

@@ -171,7 +171,7 @@ const DataTableRow = pure(({ row, columns, handleRowClick, style }) => {
  * @example
  * render {
  *    const data = [
- *     { id: 'buffalos', amount: 1, status: <Error />, statusValue: 2 }
+ *     { id: 'buffalos', amount: 1, status: <Error />, statusValue: 2 },
  *     { id: 'milk', amount: 3, status: <Warning />, statusValue: 1 }
  *   ];
  *   const columns = [

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

@@ -0,0 +1,57 @@
+/*
+ * 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 { StatusError, StatusOK, StatusWarning } from './Status';
+import SortableTable from './SortableTable';
+
+export default {
+  title: 'Sortable Table',
+  component: SortableTable,
+};
+const containerStyle = { width: 600, padding: 20 };
+
+const data = [
+  { id: 'buffalos', amount: 1, status: <StatusError />, statusValue: 2 },
+  { id: 'milk', amount: 3, status: <StatusWarning />, statusValue: 1 },
+  { id: 'cheese', amount: 8, status: <StatusWarning />, statusValue: 1 },
+  { id: 'bread', amount: 2, status: <StatusOK />, statusValue: 0 },
+];
+const columns = [
+  { id: 'id', label: 'ID' },
+  { id: 'amount', disablePadding: false, numeric: true, label: 'AMOUNT' },
+  { id: 'status', label: 'STATUS', sortValue: row => row.statusValue },
+];
+const footerData = [
+  { id: 'total', amount: 4, statusValue: 2, status: <StatusError /> },
+];
+
+export const Default = () => (
+  <div style={containerStyle}>
+    <SortableTable orderBy="desc" data={data} columns={columns} />
+  </div>
+);
+
+export const WithFooter = () => (
+  <div style={containerStyle}>
+    <SortableTable
+      orderBy="asc"
+      data={data}
+      columns={columns}
+      footerData={footerData}
+    />
+  </div>
+);

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

@@ -0,0 +1,67 @@
+/*
+ * 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 {
+  StatusError,
+  StatusFailed,
+  StatusNA,
+  StatusOK,
+  StatusPending,
+  StatusRunning,
+  StatusWarning,
+} from './Status';
+
+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
+  </>
+);

packages/core/src/layout/HeaderLabel/OwnerHeaderLabel.js

@@ -1,81 +0,0 @@
-/*
- * 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 { Tooltip, Link, withStyles } from '@material-ui/core';
-
-import { StatusError } from 'components/Status';
-import HeaderLabel from './HeaderLabel';
-
-const style = theme => ({
-  notVerified: {
-    color: theme.palette.status.error,
-    borderRadius: 4,
-    padding: '3px 6px',
-    fontSize: '8pt',
-    opacity: 0.8,
-    fontWeight: 'bold',
-    position: 'relative',
-    top: -4,
-    backgroundColor: 'pink',
-    float: 'right',
-    marginLeft: 14,
-  },
-  label: { float: 'left' },
-});
-
-class OwnerHeaderLabel extends Component {
-  static propTypes = {
-    owner: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { owner, classes } = this.props;
-    const isBadSquad = owner.type !== 'squad';
-
-    const notVerified = isBadSquad && (
-      <Link href="https://spotify.stackenterprise.co/a/4412/23">
-        <span className={classes.notVerified}>
-          <StatusError style={{ position: 'relative', top: 2 }} /> Squad not
-          verified!
-        </span>
-      </Link>
-    );
-    const label = (
-      <Tooltip
-        title="This component is not owned by an existing squad. Click the badge to learn how to fix this."
-        placement="bottom"
-      >
-        <span>
-          <span className={classes.label}>{owner.name}</span>
-        </span>
-      </Tooltip>
-    );
-    return (
-      <>
-        <HeaderLabel
-          label="Owner"
-          value={isBadSquad ? label : owner.name}
-          url={owner.name ? `/org/${owner.name}` : ''}
-        />
-        {notVerified}
-      </>
-    );
-  }
-}
-
-export default withStyles(style)(OwnerHeaderLabel);