Skip to content
This repository was archived by the owner on Apr 11, 2019. It is now read-only.

Commit 9277e7b

Browse files
RyanCCollinsRyanCCollins
committed
Feat: finish implementation of new demo
1 parent 5abe87a commit 9277e7b

File tree

33 files changed

+668
-62
lines changed

33 files changed

+668
-62
lines changed

‎app/src/components/AppFooter/tests/__snapshots__/index.test.js.snap‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
exports[`<AppFooter /> should render with default props 1`] = `
2+
<Footer
3+
colorIndex="light-2"
4+
direction="row"
5+
pad="large"
6+
responsive={false}>
7+
<Box
8+
align="center"
9+
announce={false}
10+
className={undefined}
11+
direction="column"
12+
focusable={true}
13+
pad="none"
14+
responsive={true}
15+
tag="div">
16+
<Heading
17+
tag="h3">
18+
By
19+
20+
<a
21+
className={undefined}
22+
href="http://www.ryancollins.io">
23+
Ryan Collins
24+
</a>
25+
</Heading>
26+
<Heading
27+
tag="h5">
28+
This app is licensed under the
29+
30+
<a
31+
className={undefined}
32+
href="https://github.com/RyanCCollins/ryancollinsio/blob/master/LICENSE">
33+
MIT License.
34+
</a>
35+
36+
Take a peak at the
37+
38+
<br />
39+
<Anchor
40+
className={undefined}
41+
href="https://github.com/RyanCCollins/ryancollinsio"
42+
tag="a">
43+
source code.
44+
</Anchor>
45+
</Heading>
46+
<nav
47+
aria-hidden={true}
48+
className="grommetux-box grommetux-box--direction-row grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--row grommetux-menu--inline">
49+
<SocialShare
50+
a11yTitle="Go to Facebook to Share this website"
51+
link="http://www.ryancollins.io"
52+
text="RyanCollins.io"
53+
title=""
54+
type="facebook" />
55+
<SocialShare
56+
a11yTitle="Go to Twitter to Share this website"
57+
link="http://www.ryancollins.io"
58+
text="RyanCollins.io"
59+
title=""
60+
type="twitter" />
61+
<SocialShare
62+
a11yTitle="Go to Linkedin to Share this website"
63+
link="http://www.ryancollins.io"
64+
text="RyanCollins.io"
65+
title="Restaurant Reviewer"
66+
type="linkedin" />
67+
</nav>
68+
</Box>
69+
</Footer>
70+
`;

‎app/src/components/Avatar/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
## Avatar Component
2+
A reusable avatar component with some styling.
3+
4+
### Example
5+
6+
```js
7+
<Avatar src={person.url} />
8+
```
9+
10+
### Props
11+
12+
| Prop | Type | Default | Possible Values
13+
| ------------- | -------- | ----------- | ---------------------------------------------
14+
| **src** | String | | Any string value

‎app/src/components/Avatar/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { PropTypes } from 'react';
2+
import styles from './index.module.scss';
3+
import cssModules from 'react-css-modules';
4+
const defaultAvatarUrl = 'https://github.com/RyanCCollins/cdn/blob/master/alumni-webapp/no-user.png?raw=true';
5+
6+
const Avatar = ({
7+
src,
8+
}) => (
9+
<img
10+
src={src || defaultAvatarUrl}
11+
className={styles.avatar}
12+
/>
13+
);
14+
15+
Avatar.propTypes = {
16+
src: PropTypes.string.isRequired,
17+
};
18+
19+
Avatar.defaultProps = {
20+
src: defaultAvatarUrl,
21+
};
22+
23+
export default cssModules(Avatar, styles);

‎app/src/components/Avatar/index.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.avatar {
2+
width: 100px;
3+
height: 100px;
4+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
5+
padding: 4px;
6+
line-height: 1.42857143;
7+
background-color: #fff;
8+
border: 1px solid #ddd;
9+
border-radius: 50%;
10+
}

‎app/src/components/Avatar/tests/__snapshots__/index.test.js.snap‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
exports[`<Avatar /> should render with default props 1`] = `
2+
<img
3+
className={undefined}
4+
src="https://github.com/ryanccollins.png" />
5+
`;

app/src/components/Header/tests/index.test.js renamed to app/src/components/Avatar/tests/index.test.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import Header from '../index';
1+
import Avatar from '../index';
22
import { shallow } from 'enzyme';
33
import { shallowToJson } from 'enzyme-to-json';
44
import React from 'react';
55

6-
describe('<Header />', () => {
6+
describe('<Avatar />', () => {
77
it('should render with default props', () => {
88
const wrapper = shallow(
9-
<Header
10-
content="Hello World"
11-
/>
9+
<Avatar src="https://github.com/ryanccollins.png" />
1210
);
1311
expect(shallowToJson(wrapper)).toMatchSnapshot();
1412
});

‎app/src/components/Contributor/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Contributor Component
2+
A component that ...
3+
4+
### Example
5+
6+
```js
7+
<Contributor />
8+
```
9+
10+
### Props
11+
12+
| Prop | Type | Default | Possible Values
13+
| ------------- | -------- | ----------- | ---------------------------------------------
14+
| **myProp** | String | | Any string value
15+
16+
17+
### Other Information

‎app/src/components/Contributor/index.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { PropTypes } from 'react';
2+
import styles from './index.module.scss';
3+
import cssModules from 'react-css-modules';
4+
import Heading from 'grommet-udacity/components/Heading';
5+
import Box from 'grommet-udacity/components/Heading';
6+
import Paragraph from 'grommet-udacity/components/Paragraph';
7+
import Anchor from 'grommet-udacity/components/Anchor';
8+
import SocialGithubIcon from 'grommet-udacity/components/icons/base/SocialGithub';
9+
10+
import { Avatar } from 'components';
11+
12+
const Contributor = ({
13+
person,
14+
}) => (
15+
<Box
16+
className={styles.contributor}
17+
align="center"
18+
justify="center"
19+
size="large"
20+
>
21+
<Avatar src={person.avatar} />
22+
<Heading tag="h3" align="center">
23+
{person.name}
24+
</Heading>
25+
<Paragraph>
26+
{`${person.bio.slice(0, 300)}`}
27+
</Paragraph>
28+
<Anchor
29+
icon={<SocialGithubIcon />}
30+
href={`https://github.com/${person.github}`}
31+
primary
32+
>
33+
{person.github}
34+
</Anchor>
35+
</Box>
36+
);
37+
38+
Contributor.propTypes = {
39+
person: PropTypes.shape({
40+
name: PropTypes.string.isRequired,
41+
avatar: PropTypes.string.isRequired,
42+
bio: PropTypes.string.isRequired,
43+
}),
44+
};
45+
46+
export default cssModules(Contributor, styles);

‎app/src/components/Contributor/index.module.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.contributor {
2+
margin-top: 0;
3+
margin-bottom: 1.5rem;
4+
background: #fff;
5+
border: 1px solid #dbe2e8;
6+
box-shadow: 0 2px 4px 0 rgba(46,61,73,0.12);
7+
border-radius: 0.125rem;
8+
transition: box-shadow 0.3s ease, border 0.3s ease;
9+
height: 28rem;
10+
margin: 10px;
11+
padding: 40px;
12+
color: #7d97ad;
13+
p {
14+
color: #7d97ad;
15+
}
16+
}

‎app/src/components/Contributor/tests/__snapshots__/index.test.js.snap‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
exports[`<Contributor /> should render with default props 1`] = `
2+
<Heading
3+
align="center"
4+
className={undefined}
5+
justify="center"
6+
size="large"
7+
tag="h1">
8+
<undefined
9+
src="https://avatars.githubusercontent.com/u/13810084?v=3" />
10+
<Heading
11+
align="center"
12+
tag="h3">
13+
Ryan Collins
14+
</Heading>
15+
<Paragraph>
16+
Experienced Software Engineer specializing in implementing cutting-edge technologies in a multitude of domains, focusing on React and Front End. Weekend Data Scientist and Functional Programmer.
17+
</Paragraph>
18+
<Anchor
19+
href="https://github.com/ryanccollins"
20+
icon={
21+
<function Icon() {
22+
(0, _classCallCheck3.default)(this, Icon);
23+
return (0, _possibleConstructorReturn3.default)(this, (Icon.__proto__ || (0, _getPrototypeOf2.default)(Icon)).apply(this, arguments));
24+
}
25+
a11yTitleId="social-github-title"
26+
responsive={true} />
27+
}
28+
primary={true}
29+
tag="a">
30+
ryanccollins
31+
</Anchor>
32+
</Heading>
33+
`;

0 commit comments

Comments
 (0)