Skip to content

Commit 48c7a4c

Browse files
justafishdawehner
justafish
authored and
dawehner
committed
Moves components into a pattern lab/atomic design structure and adds some CSS examples (#6)
1 parent 4a54741 commit 48c7a4c

File tree

14 files changed

+611
-65
lines changed

14 files changed

+611
-65
lines changed

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
![Demo of vfancy falling back to Drupal for an unknown route](https://i.imgur.com/JW7CdkZ.gifv)
22

3+
# Installation
34

45
```
56
git clone https://github.com/drupal/drupal
@@ -20,3 +21,9 @@ php -S localhost:8000
2021

2122
- Open `http://localhost:8000` and install with SQLite
2223
- Visit `http://localhost:8000/vfancy`
24+
25+
# For Local Development
26+
27+
- Copy `.env` to `.env.local` and comment out `PUBLIC_URL`
28+
- Start the Webpack dev server with `yarn start`
29+
- Visit `http://localhost:3000/`

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"emotion": "^9.0.2",
67
"react": "^16.2.0",
78
"react-dom": "^16.2.0",
89
"react-router-dom": "^4.2.2"

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22+
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
2223
<title>React App</title>
2324
</head>
2425
<body>

‎src/App.css

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/App.js renamed to ‎src/App.jsx

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,11 @@ import {
55
Link
66
} from 'react-router-dom'
77

8+
import Home from './components/05_pages/Home/Home';
9+
import Permissions from './components/05_pages/Permissions/Permissions';
810

9-
const Home = () => (
10-
<div>
11-
<h1>Hello, world!</h1>
12-
</div>
13-
);
14-
15-
const Permissions = () => (
16-
<div>
17-
<h1>Permissions</h1>
18-
<p>This will be the permissions page.</p>
19-
</div>
20-
);
21-
22-
const routes = {
23-
'/': Home,
24-
'/admin/people/permissions': Permissions,
25-
};
11+
import normalize from './styles/normalize'; // eslint-disable-line no-unused-vars
12+
import base from './styles/base'; // eslint-disable-line no-unused-vars
2613

2714
class NoMatch extends Component {
2815
componentWillReceiveProps(nextProps) {
@@ -35,6 +22,11 @@ class NoMatch extends Component {
3522
}
3623
};
3724

25+
// @todo Share this with Drupal
26+
const routes = {
27+
'/admin/people/permissions': Permissions,
28+
};
29+
3830
class App extends Component {
3931
componentDidMount() {
4032
window.history.replaceState(null, null, '/');
@@ -50,10 +42,12 @@ class App extends Component {
5042
<li><Link to="/node/add">Content</Link></li>
5143
</ul>
5244

53-
<hr/>
45+
<hr />
5446

55-
<Route exact path="/" component={Home}/>
56-
<Route path="/admin/people/permissions" component={Permissions}/>
47+
<Route exact path="/" component={Home} />
48+
{Object.keys(routes).map(route => (
49+
<Route path={route} component={routes[route]} key={route} />
50+
))}
5751
<Route component={NoMatch} />
5852
</div>
5953
</Router>

‎src/components/05_pages/Home/Home.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
const Home = () => (
4+
<div>
5+
<h1>Hello, world!</h1>
6+
</div>
7+
);
8+
9+
export default Home;

‎src/components/05_pages/Permissions/Permissions.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { css } from 'emotion';
3+
4+
const Permissions = () => (
5+
<div>
6+
<h1 className={styles.title}>Permissions</h1>
7+
<p>This will be the permissions page.</p>
8+
</div>
9+
);
10+
11+
const styles = {
12+
title: css`
13+
text-decoration: underline;
14+
`,
15+
};
16+
17+
export default Permissions;
18+

‎src/index.css

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import './index.css';
43
import App from './App';
54
import registerServiceWorker from './registerServiceWorker';
65

‎src/logo.svg

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/styles/base.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { injectGlobal } from 'emotion';
2+
3+
const base = injectGlobal`
4+
/*! Typebase.less v0.1.0 | MIT License */
5+
html {
6+
/* Change default typefaces here */
7+
font-family: serif;
8+
font-size: 137.5%;
9+
-webkit-font-smoothing: antialiased;
10+
font-family: 'Open Sans', sans-serif;
11+
}
12+
/* Copy & Lists */
13+
p {
14+
line-height: 1.5rem;
15+
margin-top: 1.5rem;
16+
margin-bottom: 0;
17+
}
18+
ul,
19+
ol {
20+
margin-top: 1.5rem;
21+
margin-bottom: 1.5rem;
22+
}
23+
ul li,
24+
ol li {
25+
line-height: 1.5rem;
26+
}
27+
ul ul,
28+
ol ul,
29+
ul ol,
30+
ol ol {
31+
margin-top: 0;
32+
margin-bottom: 0;
33+
}
34+
blockquote {
35+
line-height: 1.5rem;
36+
margin-top: 1.5rem;
37+
margin-bottom: 1.5rem;
38+
}
39+
/* Headings */
40+
h1,
41+
h2,
42+
h3,
43+
h4,
44+
h5,
45+
h6 {
46+
/* Change heading typefaces here */
47+
font-family: 'Roboto', sans-serif;
48+
margin-top: 1.5rem;
49+
margin-bottom: 0;
50+
line-height: 1.5rem;
51+
}
52+
h1 {
53+
font-size: 4.242rem;
54+
line-height: 4.5rem;
55+
margin-top: 3rem;
56+
}
57+
h2 {
58+
font-size: 2.828rem;
59+
line-height: 3rem;
60+
margin-top: 3rem;
61+
}
62+
h3 {
63+
font-size: 1.414rem;
64+
}
65+
h4 {
66+
font-size: 0.707rem;
67+
}
68+
h5 {
69+
font-size: 0.4713333333333333rem;
70+
}
71+
h6 {
72+
font-size: 0.3535rem;
73+
}
74+
/* Tables */
75+
table {
76+
margin-top: 1.5rem;
77+
border-spacing: 0px;
78+
border-collapse: collapse;
79+
}
80+
table td,
81+
table th {
82+
padding: 0;
83+
line-height: 33px;
84+
}
85+
/* Code blocks */
86+
code {
87+
vertical-align: bottom;
88+
}
89+
/* Leading paragraph text */
90+
.lead {
91+
font-size: 1.414rem;
92+
}
93+
/* Hug the block above you */
94+
.hug {
95+
margin-top: 0;
96+
}
97+
`;
98+
99+
export default base;

‎src/styles/colors.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const colors = {
2+
black: '#000000',
3+
white: '#ffffff',
4+
};
5+
6+
export default colors;

0 commit comments

Comments
 (0)