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