Move styleguidist docs and create TeamMemberCard

src/components/TeamMemberCard/TeamMemberCard.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { Card, CardHeader, Avatar, IconButton, CardContent, 
+	CardActions, Typography, Link, makeStyles } from '@material-ui/core';
+import WebsiteIcon from '@material-ui/icons/Language';
+import webqueue2Theme from "../../theme";
+
+export default function TeamMemberCard({firstName, lastName, imageUrl, websiteUrl, children}){
+
+	const theme = webqueue2Theme();
+
+	const useStyles = () => makeStyles({
+		"avatarImageLarge": {
+			width: theme.spacing(2),
+			height: theme.spacing(2)
+		}
+	});
+
+	const classes = useStyles()
+
+	const TeamMemberAvatar = () => {
+		return(
+			<Avatar
+				src={imageUrl}
+				className={classes.avatarImageLarge}
+			>
+				{firstName.charAt(0)}
+			</Avatar>
+		);
+	};
+
+	return(
+			<Card>
+				<CardHeader 
+					avatar={<TeamMemberAvatar />}
+					title={`${firstName} ${lastName}`}
+					titleTypographyProps={{
+						variant: "h4"
+					}}
+				/>
+				<CardContent>
+					{children}
+				</CardContent>
+				<CardActions>
+					<Link href={websiteUrl}>
+						<IconButton>
+							<WebsiteIcon />
+						</IconButton>
+					</Link>
+				</CardActions>
+			</Card>
+	);
+};
+
+TeamMemberCard.propTypes = {
+	/** Team member's first name. */
+	"firstName": PropTypes.string.isRequired,
+	/** Team member's last name. */
+	"lastName": PropTypes.string.isRequired,
+	/** Image for user. Can be a URL or image import. */
+	"imageUrl": PropTypes.string,
+	/** Info that appears in the body of the card. */
+	"content": PropTypes.any,
+	/** URL to team member's website. */
+	"websiteUrl": PropTypes.string.isRequired,
+}

src/components/TeamMemberCard/TeamMemberCard.md

@@ -0,0 +1,21 @@
+The ItemTable is the primary view for webqueue2. It displays item metadata for items of selected queues and allows for filtering by field and opening an item by clicking. By default, it is pre-configured to fetch data from the webqueue2 API. 
+
+```jsx
+import React, { useState } from "react";
+import { Typography } from '@material-ui/core';
+
+<TeamMemberCard 
+	firstName="Jane" 
+	lastName="Doe"
+	websiteUrl="https://lmgtfy.com/?q=jane+doe"
+>
+	<Typography variant="body1" paragraph>
+		Irure ea dolor do duis dolor. Irure nisi mollit magna consectetur tempor consequat nisi aute reprehenderit esse consequat quis. Qui fugiat cupidatat voluptate eiusmod. Veniam quis et nisi qui cupidatat est est elit exercitation et nostrud deserunt ea. Nulla ex voluptate dolor sint nulla culpa culpa ipsum excepteur laborum nostrud ad.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		Mollit dolore dolore sunt ullamco ex esse ad incididunt elit qui non id voluptate dolor. Ullamco veniam minim quis eu consectetur fugiat ullamco qui anim sit dolor. Ullamco exercitation enim ut aliquip amet dolore aliquip do in occaecat nulla dolor laboris consequat.
+	</Typography>
+</TeamMemberCard>
+
+
+```

src/components/TeamMemberCard/index.js

@@ -0,0 +1,3 @@
+import TeamMemberCard from "./TeamMemberCard";
+
+export default TeamMemberCard;

src/docs/Team.md

@@ -0,0 +1,52 @@
+```jsx
+import { Typography } from "@material-ui/core";
+import TeamMemberCard from "../components/TeamMemberCard/";
+import tylerPicture from "../assets/TeamMemberPictures/Tyler.jpg";
+
+<TeamMemberCard 
+	firstName="Tyler" 
+	lastName="Wright" 
+	imageUrl={tylerPicture}
+	websiteUrl="http://tylerjwright.com/"
+>
+	<Typography variant="body1" paragraph>
+		Hello, my name is Tyler Wright.  I am a senior studying web programming and design with a minor in communications from Indianapolis, Indiana. Some of the things that I enjoy outside of web development are cooking, playing video games, and collecting sneakers. I am interested in this project because I want to further develop my front-end web development skills and get a feeling for what it’s like working on projects in a professional setting.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		When it comes to this project, I hope to create a functional, easy to use, and beautiful front end that helps to make the end user’s experience great.  We plan to accomplish this by using React.js which is a technology that is very prevalent in web development currently.  By the end of the capstone project hope to have learned new skills that help me post-graduation and experience working in a professional setting.
+	</Typography>
+</TeamMemberCard>
+```
+
+```jsx
+import { Typography } from "@material-ui/core";
+import TeamMemberCard from "../components/TeamMemberCard/";
+import justinPicture from "../assets/TeamMemberPictures/Justin.jpg";
+
+
+<TeamMemberCard 
+	firstName="Justin" 
+	lastName="Campbell" 
+	imageUrl="https://justincampbell.dev/Justin.jpg"
+	websiteUrl="https://justincampbell.dev/"
+>
+	<Typography variant="body1" paragraph>
+		I humanize technology, bridging the void between computers and the people using them.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		I was born legally blind and from early childhood I’ve been drawn to computers. They make the world accessible where it wouldn’t be otherwise. Computers provide infinite possibilities for me to interact with the world and change it. My elementary school pastime was tinkering with tech (and fixing what I broke before my parents found out.) In middle school I started an IT consulting business and by high school I had my first contract work with a growing list of clients.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		When I started college at Purdue, I’d already spent 8 years studying and working with databases, web servers, file sharing servers, virtualization, containers and orchestration, Linux server administration, network management, staff training and more. I knew how these things worked and where some of the pain points were. I started contributing to open source projects to help smooth those same pain points and found a new passion in technology: user experience and interface design.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		I started at Purdue in UI/UX. Two years later I transitioned to Cybersecurity, spent some time in Computer Information Technology and landed in Web Development where I am now. This is my fifth and final year at Purdue (I like to call it a victory lap.) While finishing my degree I’m working with Purdue’s Engineering Computer Network advocating for our users and improving our workflow by developing internal tools. My latest project is a new ticketing system built with ReactJS, and Flask-RESTful.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		When asked what I do, I don’t tell people I work in IT, rather, I tell them I humanize technology. This is because the purpose of IT is not deploying the latest and greatest software, rather, it is about meeting users’ needs and enabling their work. People need to create, communicate and collaborate; their ability to do that work is more important than what systems enable it.
+	</Typography>
+	<Typography variant="body1" paragraph>
+		I love what I do. I get to advocate for my teammates and the users who rely on us every day. I also love new experiences and I’m looking for those now. Let me know how I can help you and your team get their work done!
+	</Typography>
+</TeamMemberCard>
+```

styleguidist/styleguide.config.js

@@ -30,7 +30,11 @@ module.exports = {
 	sections: [
 		{
 			name: "Getting Started",
-			content: "../docs/Styleguidist/Introduction.md",
+			content: "../src/docs/Introduction.md",
+		},
+		{
+			name: "Team",
+			content: "../src/docs/Team.md",
 		},
 		{
 			name: "Components",
@@ -104,5 +108,5 @@ module.exports = {
 	 * @example true 
 	 * @default false
 	 */
-	defaultExample: true,
+	defaultExample: false,
 }