diff --git a/packages/core/src/components/SortableTable.js b/packages/core/src/components/SortableTable.js
index e04b844048..ab4e1af2de 100644
--- a/packages/core/src/components/SortableTable.js
+++ b/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: , statusValue: 2 }
+ * { id: 'buffalos', amount: 1, status: , statusValue: 2 },
* { id: 'milk', amount: 3, status: , statusValue: 1 }
* ];
* const columns = [
diff --git a/packages/core/src/components/SortableTable.stories.tsx b/packages/core/src/components/SortableTable.stories.tsx
new file mode 100644
index 0000000000..c534457d53
--- /dev/null
+++ b/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: , statusValue: 2 },
+ { id: 'milk', amount: 3, status: , statusValue: 1 },
+ { id: 'cheese', amount: 8, status: , statusValue: 1 },
+ { id: 'bread', amount: 2, status: , 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: },
+];
+
+export const Default = () => (
+
+
+
+);
+
+export const WithFooter = () => (
+
+
+
+);
diff --git a/packages/core/src/components/Status/Status.stories.tsx b/packages/core/src/components/Status/Status.stories.tsx
new file mode 100644
index 0000000000..91ef53d7fe
--- /dev/null
+++ b/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 = () => (
+ <>
+ Status OK
+ >
+);
+export const statusWarning = () => (
+ <>
+ Status Warning
+ >
+);
+export const statusError = () => (
+ <>
+ Status Error
+ >
+);
+export const statusFailed = () => (
+ <>
+ Status Failed
+ >
+);
+export const statusPending = () => (
+ <>
+ Status Pending
+ >
+);
+export const statusRunning = () => (
+ <>
+ Status Running
+ >
+);
+export const statusNA = () => (
+ <>
+ Status NA
+ >
+);
diff --git a/packages/core/src/layout/HeaderLabel/OwnerHeaderLabel.js b/packages/core/src/layout/HeaderLabel/OwnerHeaderLabel.js
deleted file mode 100644
index abe0ee8b33..0000000000
--- a/packages/core/src/layout/HeaderLabel/OwnerHeaderLabel.js
+++ /dev/null
@@ -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 && (
-
-
- Squad not
- verified!
-
-
- );
- const label = (
-
-
- {owner.name}
-
-
- );
- return (
- <>
-
- {notVerified}
- >
- );
- }
-}
-
-export default withStyles(style)(OwnerHeaderLabel);