Fix warning about invalid DOM nesting

smartcontractkit · Jun 12, 2019 · 2aa27cb · 2aa27cb
1 parent 6fa5e99
commit 2aa27cb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/operator_ui/src/components/JobRuns/RegionalNav.js b/operator_ui/src/components/JobRuns/RegionalNav.js
@@ -56,10 +56,8 @@ const RegionalNav = ({ classes, jobSpecId, jobRunId, jobRun, url }) => {
           <Typography variant="subtitle2" color="secondary" gutterBottom>
             Job Run Detail
           </Typography>
-          <Link to={`/jobs/${jobSpecId}`}>
-            <Typography variant="subtitle1" color="primary">
-              {jobSpecId}
-            </Typography>
+          <Link to={`/jobs/${jobSpecId}`} variant="subtitle1" color="primary">
+            {jobSpecId}
           </Link>
         </Grid>
         <Grid item xs={12}>

diff --git a/operator_ui/src/components/Link.tsx b/operator_ui/src/components/Link.tsx
@@ -8,8 +8,13 @@ import {
 } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import { grey } from '@material-ui/core/colors'
+import { ThemeStyle } from '@material-ui/core/styles/createTypography'
+import { PropTypes } from '@material-ui/core'
 import classNames from 'classnames'
 
+type Variant = ThemeStyle | 'srOnly'
+type Color = PropTypes.Color | 'textPrimary' | 'textSecondary' | 'error'
+
 const styles = (_theme: Theme) =>
   createStyles({
     link: {
@@ -24,15 +29,22 @@ const styles = (_theme: Theme) =>
 interface IProps extends WithStyles<typeof styles> {
   children: React.ReactNode
   to: string
+  variant?: Variant
+  color?: Color
   className?: string
 }
 
-const Link = ({ children, classes, className, to }: IProps) => (
-  <ReactStaticLink to={to} className={classNames(classes.link, className)}>
-    <Typography variant="body1" color="inherit" className={classes.linkContent}>
-      {children}
-    </Typography>
-  </ReactStaticLink>
-)
+const Link = ({ children, classes, className, to, variant, color }: IProps) => {
+  const v = variant || 'body1'
+  const c = color || 'inherit'
+
+  return (
+    <ReactStaticLink to={to} className={classNames(classes.link, className)}>
+      <Typography variant={v} color={c} className={classes.linkContent}>
+        {children}
+      </Typography>
+    </ReactStaticLink>
+  )
+}
 
 export default withStyles(styles)(Link)