[docs] Add a team page (#7842)

docs/src/modules/components/Twitter.js

@@ -0,0 +1,15 @@
+// @flow
+/* eslint-disable max-len */
+
+import React from 'react';
+import SvgIcon from 'material-ui/SvgIcon';
+
+function Twitter(props: Object) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M7.6 21.63c8.95 0 13.84-7.4 13.84-13.84v-.63c.94-.7 1.76-1.55 2.4-2.52-.86.38-1.8.64-2.78.76 1-.6 1.78-1.54 2.14-2.68-.94.56-1.98.96-3.1 1.18-.88-.94-2.14-1.53-3.54-1.53-2.7 0-4.86 2.17-4.86 4.86 0 .38.04.75.12 1.1C7.78 8.14 4.2 6.2 1.8 3.27c-.42.72-.66 1.55-.66 2.44 0 1.7.86 3.18 2.16 4.05-.8-.02-1.55-.24-2.2-.6v.05c0 2.36 1.67 4.33 3.9 4.77-.4.1-.84.17-1.28.17-.32 0-.62-.03-.92-.08.62 1.93 2.42 3.33 4.55 3.37-1.67 1.3-3.76 2.1-6.04 2.1-.4 0-.77-.04-1.15-.08 2.15 1.38 4.7 2.18 7.45 2.18" />
+    </SvgIcon>
+  );
+}
+
+export default Twitter;

docs/src/modules/components/withRoot.js

@@ -124,6 +124,9 @@ const pages = [
       {
         pathname: '/discover-more/roadmap',
       },
+      {
+        pathname: '/discover-more/team',
+      },
     ],
   },
   {

docs/src/pages/demos/cards/MediaControlCard.js

@@ -10,7 +10,7 @@ import SkipPreviousIcon from 'material-ui-icons/SkipPrevious';
 import PlayArrowIcon from 'material-ui-icons/PlayArrow';
 import SkipNextIcon from 'material-ui-icons/SkipNext';
 
-const styles = {
+const styles = theme => ({
   card: {
     display: 'flex',
   },
@@ -28,14 +28,14 @@ const styles = {
   controls: {
     display: 'flex',
     alignItems: 'center',
-    paddingLeft: 8,
-    paddingBottom: 8,
+    paddingLeft: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
   },
   playIcon: {
     height: 38,
     width: 38,
   },
-};
+});
 
 function MediaControlCard(props) {
   const classes = props.classes;

docs/src/pages/discover-more/Team.js

@@ -0,0 +1,131 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Card, { CardContent, CardMedia } from 'material-ui/Card';
+import Typography from 'material-ui/Typography';
+import IconButton from 'material-ui/IconButton';
+import Github from 'docs/src/modules/components/Github';
+import Twitter from 'docs/src/modules/components/Twitter';
+
+const members = [
+  {
+    name: 'Hai Nguyen',
+    github: 'hai-cea',
+    twitter: 'haicea',
+    city: 'Dallas, Texas, US',
+  },
+  {
+    name: 'Olivier Tassinari',
+    github: 'oliviertassinari',
+    twitter: 'olivtassinari',
+    city: 'Paris, France',
+  },
+  {
+    name: 'Matt Brookes',
+    github: 'mbrookes',
+    twitter: 'randomtechdude',
+    city: 'London, UK',
+  },
+  {
+    name: 'Kevin Ross',
+    github: 'rosskevin',
+    twitter: 'rosskevin',
+    city: 'Franklin, Tennessee, US',
+  },
+  {
+    name: 'Nathan Marks',
+    github: 'nathanmarks',
+    city: 'Toronto, ON',
+  },
+  {
+    name: 'Sebastian Sebald',
+    github: 'sebald',
+    twitter: 'sebastiansebald',
+    city: 'Freiburg, Germany',
+  },
+];
+
+const styles = theme => ({
+  root: {
+    maxWidth: 600,
+  },
+  card: {
+    display: 'flex',
+    margin: theme.spacing.unit,
+  },
+  details: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  content: {
+    flex: '1 0 auto',
+  },
+  cover: {
+    width: 124,
+    height: 124,
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  icon: {
+    margin: theme.spacing.unit,
+    width: 20,
+    height: 20,
+  },
+});
+
+function Team(props) {
+  const classes = props.classes;
+  return (
+    <div className={classes.root}>
+      {members.map(member =>
+        <Card key={member.name} className={classes.card}>
+          <CardMedia
+            className={classes.cover}
+            image={`https://github.com/${member.github}.png`}
+            title="Picture"
+          />
+          <div className={classes.details}>
+            <CardContent className={classes.content}>
+              <Typography type="headline">
+                {member.name}
+              </Typography>
+              <Typography type="subheading" color="secondary">
+                {member.city}
+              </Typography>
+            </CardContent>
+            <div className={classes.controls}>
+              {member.github &&
+                <IconButton
+                  aria-label="github"
+                  component="a"
+                  href={`https://github.com/${member.github}`}
+                  className={classes.icon}
+                >
+                  <Github />
+                </IconButton>}
+              {member.twitter &&
+                <IconButton
+                  aria-label="twitter"
+                  component="a"
+                  href={`https://twitter.com/${member.twitter}`}
+                  className={classes.icon}
+                >
+                  <Twitter />
+                </IconButton>}
+            </div>
+          </div>
+        </Card>,
+      )}
+    </div>
+  );
+}
+
+Team.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Team);

docs/src/pages/discover-more/team.md

@@ -0,0 +1,13 @@
+# Team
+
+An overview of the founding team and core contributors to Material-UI.
+
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of our community.
+The development of the project and its ecosystem is guided by an international team, some of whom have chosen to be featured below.
+
+{{demo='pages/discover-more/Team.js'}}
+
+Get involved with Material-UI development by [opening an issue](https://github.com/callemall/material-ui/issues/new) or submitting a pull request.
+Read our [contributing guidelines](https://github.com/callemall/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
+
+[Join the Material-UI Community!](/discover-more/community)

pages/discover-more/team.js

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from 'docs/src/pages/discover-more/team.md';
+
+function Page() {
+  return (
+    <MarkdownDocs
+      markdown={markdown}
+      demos={{
+        'pages/discover-more/Team.js': {
+          js: require('docs/src/pages/discover-more/Team').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/discover-more/Team'), 'utf8')
+`,
+        },
+      }}
+    />
+  );
+}
+
+export default withRoot(Page);