1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import Typography from '@material-ui/core/Typography';
7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
8 import { ArvadosTheme } from 'src/common/custom-theme';
10 interface AttributeDataProps {
12 value?: string | number;
16 type AttributeProps = AttributeDataProps & WithStyles<CssRules>;
18 class Attribute extends React.Component<AttributeProps> {
21 return !!this.props.link;
25 const { label, link, value, children, classes } = this.props;
26 return <Typography component="div" className={classes.attribute}>
27 <Typography component="span" className={classes.label}>{label}</Typography>
29 <a href='{link}' className={classes.link} target='_blank'>{value}</a>
31 <Typography component="span" className={classes.value}>
41 type CssRules = 'attribute' | 'label' | 'value' | 'link';
43 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
46 alignItems: 'flex-start',
47 marginBottom: theme.spacing.unit
50 color: theme.palette.grey["500"],
56 alignItems: 'flex-start',
57 textTransform: 'capitalize'
61 color: theme.palette.primary.main,
62 textDecoration: 'none',
63 overflowWrap: 'break-word'
67 export default withStyles(styles)(Attribute);