Skip to content

Commit

Permalink
feat: add avatars and fix about us (#67)
Browse files Browse the repository at this point in the history 
Co-authored-by: Herman Chiu <[email protected]>
  • Loading branch information
@adamos486 @HermanChiu
adamos486 and HermanChiu authored May 14, 2022
1 parent 5e8bdc4 commit d310e33
Show file tree
Hide file tree
Showing 10 changed files with 268 additions and 28 deletions.
Binary file added src/assets/avatars/adam.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/avatars/chuhui.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/avatars/david.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/avatars/herman.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/avatars/joel.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 24 additions & 23 deletions src/components/home/AboutUs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,38 +24,39 @@ const AboutDescription = styled.div`
flex-direction: column;
justify-content: space-evenly;
text-align: left;
width: 433px;
width: auto;
z-index: 1;
margin-left: 12%;
margin-right: 12%;
@media (max-width: 752px) {
margin: 0 12% 0 12%;
}
`;

const AboutUs: React.FC = () => {
return (
<Container>
<StyledYellowHalfCircle title="Yellow half circle" />
<AboutDescription>
<Typography variant="h3">About</Typography>
<br />
<br />
<Typography>
We are a group of volunteers invested in working together to improve
the City and County of San Francisco, often using technology to
support our efforts. By connecting people, organizations, resources,
tools, and networks to build for San Francisco, we will all thrive.
</Typography>
<br />
<Typography>
The Data Science Working Group’s primary purpose is to efficiently
assess, inspire, and tackle Code for San Francisco’s data science
needs, as well as to help the City and other brigades with their data
science needs whenever appropriate.
</Typography>
<ImageAvatars />
</AboutDescription>
</Container>
<Container>
<StyledYellowHalfCircle title="Yellow half circle"/>
<AboutDescription>
<Typography variant="h3">About</Typography>
<br />
<br />
<Typography>
We are a group of volunteers invested in working together to improve
the City and County of San Francisco, often using technology to
support our efforts. By connecting people, organizations, resources,
tools, and networks to build for San Francisco, we will all thrive.
</Typography>
<br />
<Typography>
The Data Science Working Group’s primary purpose is to efficiently
assess, inspire, and tackle Code for San Francisco’s data science
needs, as well as to help the City and other brigades with their
data science needs whenever appropriate.
</Typography>
<ImageAvatars />
</AboutDescription>
</Container>
);
};

Expand Down
43 changes: 42 additions & 1 deletion src/components/home/ImageAvatars.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,52 @@ describe("<ImageAvatars>", () => {
expect(screen.getByText("Data Jam Lead")).toBeVisible();
});

it("displays adams name and photo and title", () => {
render(<ImageAvatars />);

expect(screen.getByText("Adam Cobb")).toBeVisible();
expect(screen.getByAltText("Adam")).toHaveAttribute("src", "adam.jpg");
expect(screen.getByText("Engineer Lead")).toBeVisible();
});

it('displays 5 engineer labels', () => {
render(<ImageAvatars />);
const results = screen.getAllByText("Engineer");
expect(results.length).toEqual(5);
});

it("displays alexs name and photo and title", () => {
render(<ImageAvatars />);

expect(screen.getByAltText("Alex")).toHaveAttribute("src", "alexkerr.jpg");
expect(screen.getByText("Alex Kerr")).toBeVisible();
expect(screen.getByText("Engineer")).toBeVisible();
});

it("displays chuhuis name and photo and title", () => {
render(<ImageAvatars />);

expect(screen.getByAltText("ChuHui")).toHaveAttribute("src", "chuhui.jpg");
expect(screen.getByText("ChuHui Fu")).toBeVisible();
});

it("displays davids name and photo and title", () => {
render(<ImageAvatars />);

expect(screen.getByAltText("David")).toHaveAttribute("src", "david.jpg");
expect(screen.getByText("David Hay")).toBeVisible();
});

it("displays hermans name and photo and title", () => {
render(<ImageAvatars />);

expect(screen.getByAltText("Herman")).toHaveAttribute("src", "herman.jpg");
expect(screen.getByText("Herman Chiu")).toBeVisible();
});

it("displays joels name and photo and title", () => {
render(<ImageAvatars />);

expect(screen.getByAltText("Joel")).toHaveAttribute("src", "joel.png");
expect(screen.getByText("Joel Reinecke")).toBeVisible();
});
});
71 changes: 68 additions & 3 deletions src/components/home/ImageAvatars.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ import Box from '@mui/material/Box';
import rocio from "../../assets/avatars/rocio.jpg";
import emily from "../../assets/avatars/emily.jpg";
import alex from "../../assets/avatars/alexkerr.jpg";
import adam from "../../assets/avatars/adam.jpg";
import chuhui from "../../assets/avatars/chuhui.jpg";
import david from "../../assets/avatars/david.jpg";
import joel from "../../assets/avatars/joel.png";
import herman from "../../assets/avatars/herman.jpg";

const PREFIX = 'ImageAvatars';

Expand Down Expand Up @@ -42,7 +47,7 @@ export default function ImageAvatars() {
<Typography variant="h3">Meet the Team</Typography>
<div className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={6}>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
Expand All @@ -54,7 +59,7 @@ export default function ImageAvatars() {
<Typography variant="body2">Project Lead</Typography>
</Box>
</Grid>
<Grid item xs={6}>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
Expand All @@ -66,7 +71,19 @@ export default function ImageAvatars() {
<Typography variant="body2">Data Jam Lead</Typography>
</Box>
</Grid>
<Grid item xs={6}>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<Avatar alt="Adam" src={adam} className={classes.large}/>
<Typography>Adam Cobb</Typography>
<Typography variant="body2">Engineer Lead</Typography>
</Box>
</Grid>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
Expand All @@ -78,6 +95,54 @@ export default function ImageAvatars() {
<Typography variant="body2">Engineer</Typography>
</Box>
</Grid>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<Avatar alt="ChuHui" src={chuhui} className={classes.large}/>
<Typography>ChuHui Fu</Typography>
<Typography variant="body2">Engineer</Typography>
</Box>
</Grid>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<Avatar alt="David" src={david} className={classes.large}/>
<Typography>David Hay</Typography>
<Typography variant="body2">Engineer</Typography>
</Box>
</Grid>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<Avatar alt="Herman" src={herman} className={classes.large}/>
<Typography>Herman Chiu</Typography>
<Typography variant="body2">Engineer</Typography>
</Box>
</Grid>
<Grid item xs={6} md={3}>
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
>
<Avatar alt="Joel" src={joel} className={classes.large}/>
<Typography>Joel Reinecke</Typography>
<Typography variant="body2">Engineer</Typography>
</Box>
</Grid>
</Grid>
</div>
</StyledBox>
Expand Down
2 changes: 1 addition & 1 deletion src/components/home/ThankYou.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const TextAndLogos = styled.div`
display: flex;
flex-direction: column;
text-align: left;
width: 100%;
width: 100%;
height: auto;
margin: 0 5% 0 5%;
@media screen and (min-width: 720px) {
Expand Down
133 changes: 133 additions & 0 deletions src/components/home/__snapshots__/ImageAvatars.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ exports[`<ImageAvatars> renders correctly 1`] = `
>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
Expand All @@ -45,6 +46,7 @@ exports[`<ImageAvatars> renders correctly 1`] = `
</ForwardRef(Grid)>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
Expand All @@ -70,6 +72,33 @@ exports[`<ImageAvatars> renders correctly 1`] = `
</ForwardRef(Grid)>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
alignItems="center"
display="flex"
flexDirection="column"
justifyContent="center"
>
<ForwardRef(Avatar)
alt="Adam"
className="ImageAvatars-large"
src="adam.jpg"
/>
<ForwardRef(Typography)>
Adam Cobb
</ForwardRef(Typography)>
<ForwardRef(Typography)
variant="body2"
>
Engineer Lead
</ForwardRef(Typography)>
</ForwardRef(Box)>
</ForwardRef(Grid)>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
Expand All @@ -93,6 +122,110 @@ exports[`<ImageAvatars> renders correctly 1`] = `
</ForwardRef(Typography)>
</ForwardRef(Box)>
</ForwardRef(Grid)>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
alignItems="center"
display="flex"
flexDirection="column"
justifyContent="center"
>
<ForwardRef(Avatar)
alt="ChuHui"
className="ImageAvatars-large"
src="chuhui.jpg"
/>
<ForwardRef(Typography)>
ChuHui Fu
</ForwardRef(Typography)>
<ForwardRef(Typography)
variant="body2"
>
Engineer
</ForwardRef(Typography)>
</ForwardRef(Box)>
</ForwardRef(Grid)>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
alignItems="center"
display="flex"
flexDirection="column"
justifyContent="center"
>
<ForwardRef(Avatar)
alt="David"
className="ImageAvatars-large"
src="david.jpg"
/>
<ForwardRef(Typography)>
David Hay
</ForwardRef(Typography)>
<ForwardRef(Typography)
variant="body2"
>
Engineer
</ForwardRef(Typography)>
</ForwardRef(Box)>
</ForwardRef(Grid)>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
alignItems="center"
display="flex"
flexDirection="column"
justifyContent="center"
>
<ForwardRef(Avatar)
alt="Herman"
className="ImageAvatars-large"
src="herman.jpg"
/>
<ForwardRef(Typography)>
Herman Chiu
</ForwardRef(Typography)>
<ForwardRef(Typography)
variant="body2"
>
Engineer
</ForwardRef(Typography)>
</ForwardRef(Box)>
</ForwardRef(Grid)>
<ForwardRef(Grid)
item={true}
md={3}
xs={6}
>
<ForwardRef(Box)
alignItems="center"
display="flex"
flexDirection="column"
justifyContent="center"
>
<ForwardRef(Avatar)
alt="Joel"
className="ImageAvatars-large"
src="joel.png"
/>
<ForwardRef(Typography)>
Joel Reinecke
</ForwardRef(Typography)>
<ForwardRef(Typography)
variant="body2"
>
Engineer
</ForwardRef(Typography)>
</ForwardRef(Box)>
</ForwardRef(Grid)>
</ForwardRef(Grid)>
</div>
</Styled(ForwardRef(Box))>
Expand Down

0 comments on commit d310e33

Please sign in to comment.