[docs] Add Tidelift banner

mui · Jul 10, 2018 · f75e515 · f75e515
1 parent f572e46
commit f75e515
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 0 deletions.
diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Link from 'docs/src/modules/components/Link';
+
+const styles = theme => ({
+  root: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
+      .spacing.unit * 2}px`,
+    right: 0,
+    left: 0,
+    display: 'flex',
+    backgroundColor: '#626980', // Tidelift color.
+    position: 'relative',
+    top: 56,
+    [theme.breakpoints.up('sm')]: {
+      top: 64 + 36 / 2,
+      left: 'auto',
+      position: 'absolute',
+      borderBottomLeftRadius: 36 / 2,
+      borderTopLeftRadius: 36 / 2,
+    },
+  },
+  logo: {
+    background: 'url(/static/images/tidelift.svg) no-repeat 50%',
+    content: "''",
+    width: 20,
+    height: 20,
+    margin: `0 ${theme.spacing.unit}px 0 0`,
+  },
+  label: {
+    color: theme.palette.common.white,
+  },
+});
+
+function Tidelift(props) {
+  const { classes } = props;
+
+  return (
+    <Link
+      className={classes.root}
+      variant="button"
+      href="https://tidelift.com/subscription/npm/material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage"
+      target="_blank"
+      rel="noopener"
+    >
+      <span className={classes.logo} />
+      <Typography className={classes.label}>Get Professionally Supported Material-UI</Typography>
+    </Link>
+  );
+}
+
+Tidelift.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Tidelift);
diff --git a/pages/index.js b/pages/index.js
@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import withRoot from 'docs/src/modules/components/withRoot';
 import HomeSteps from 'docs/src/modules/components/HomeSteps';
+import Tidelift from 'docs/src/modules/components/Tidelift';
 import HomeBackers from 'docs/src/modules/components/HomeBackers';
 import HomeFooter from 'docs/src/modules/components/HomeFooter';
 import Link from 'docs/src/modules/components/Link';
@@ -106,6 +107,7 @@ class HomePage extends React.Component {
           }}
         />
         <Head />
+        <Tidelift />
         <div className={classes.hero}>
           <div className={classes.content}>
             <img

diff --git a/static/images/tidelift.svg b/static/images/tidelift.svg