Breaking Header and Footer out into components
For forthcoming i18n setup
This commit is contained in:
Jeff Avallone
@@ -1,9 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import Message from './Message';
|
||||
|
||||
const App = () => <Message heading="React App">
|
||||
<p>Placeholder app content</p>
|
||||
</Message>;
|
||||
const App = () => <React.Fragment>
|
||||
<Header/>
|
||||
<Message heading="React App">
|
||||
<p>Placeholder app content</p>
|
||||
</Message>
|
||||
<Footer/>
|
||||
</React.Fragment>;
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
const Footer = () => (
|
||||
<footer>
|
||||
<ul className="inline with-separator">
|
||||
<li>
|
||||
Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed: <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Footer from './Footer';
|
||||
|
||||
test('Footer rendering', () => {
|
||||
const component = shallow(
|
||||
<Footer>
|
||||
<p>Content</p>
|
||||
</Footer>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
import GithubIcon from 'feather-icons/dist/icons/github.svg';
|
||||
|
||||
const Header = () => (
|
||||
<header id="main" data-banner={ process.env.BANNER }>
|
||||
<h1>
|
||||
<a href="/">Regexper</a>
|
||||
</h1>
|
||||
|
||||
<ul className="inline">
|
||||
<li><a href="https://github.com/javallone/regexper-static">
|
||||
<GithubIcon/>Source on GitHub
|
||||
</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import Header from './Header';
|
||||
|
||||
const env = { ...process.env };
|
||||
|
||||
afterEach(() => {
|
||||
process.env = env;
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
process.env = {
|
||||
...process.env,
|
||||
BANNER: 'testing'
|
||||
};
|
||||
});
|
||||
|
||||
test('Header rendering', () => {
|
||||
const component = shallow(
|
||||
<Header>
|
||||
<p>Content</p>
|
||||
</Header>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
|
||||
|
||||
import pkg from '../../package.json';
|
||||
|
||||
import GithubIcon from 'feather-icons/dist/icons/github.svg';
|
||||
import Header from '../components/Header';
|
||||
import Footer from '../components/Footer';
|
||||
|
||||
const PageTemplate = ({ title, children }) => (
|
||||
<html>
|
||||
@@ -18,34 +19,11 @@ const PageTemplate = ({ title, children }) => (
|
||||
<title>Regexper{ title && (' - ' + title) }</title>
|
||||
</head>
|
||||
<body data-build-id={ process.env.BUILD_ID }>
|
||||
<header id="main" data-banner={ process.env.BANNER }>
|
||||
<h1>
|
||||
<a href="/">Regexper</a>
|
||||
</h1>
|
||||
|
||||
<ul className="inline">
|
||||
<li><a href="https://github.com/javallone/regexper-static">
|
||||
<GithubIcon/>Source on GitHub
|
||||
</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
{ children }
|
||||
|
||||
<footer>
|
||||
<ul className="inline with-separator">
|
||||
<li>
|
||||
Created by <a href="mailto:jeff.avallone@gmail.com">Jeff Avallone</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed: <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
<div id="root">
|
||||
<Header/>
|
||||
{ children }
|
||||
<Footer/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -12,7 +12,6 @@ afterEach(() => {
|
||||
beforeEach(() => {
|
||||
process.env = {
|
||||
...process.env,
|
||||
BANNER: 'testing',
|
||||
BUILD_ID: 'test-id'
|
||||
};
|
||||
});
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Footer rendering 1`] = `
|
||||
<footer>
|
||||
<ul
|
||||
className="inline with-separator"
|
||||
>
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
`;
|
||||
@@ -0,0 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Header rendering 1`] = `
|
||||
<header
|
||||
data-banner="testing"
|
||||
id="main"
|
||||
>
|
||||
<h1>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
Regexper
|
||||
</a>
|
||||
</h1>
|
||||
<ul
|
||||
className="inline"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/javallone/regexper-static"
|
||||
>
|
||||
<Component />
|
||||
Source on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
`;
|
||||
@@ -25,59 +25,15 @@ exports[`PageTemplate rendering 1`] = `
|
||||
<body
|
||||
data-build-id="test-id"
|
||||
>
|
||||
<header
|
||||
data-banner="testing"
|
||||
id="main"
|
||||
<div
|
||||
id="root"
|
||||
>
|
||||
<h1>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
Regexper
|
||||
</a>
|
||||
</h1>
|
||||
<ul
|
||||
className="inline"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/javallone/regexper-static"
|
||||
>
|
||||
<Component />
|
||||
Source on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<footer>
|
||||
<ul
|
||||
className="inline with-separator"
|
||||
>
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
<Header />
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
@@ -108,59 +64,15 @@ exports[`PageTemplate rendering with title 1`] = `
|
||||
<body
|
||||
data-build-id="test-id"
|
||||
>
|
||||
<header
|
||||
data-banner="testing"
|
||||
id="main"
|
||||
<div
|
||||
id="root"
|
||||
>
|
||||
<h1>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
Regexper
|
||||
</a>
|
||||
</h1>
|
||||
<ul
|
||||
className="inline"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/javallone/regexper-static"
|
||||
>
|
||||
<Component />
|
||||
Source on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<footer>
|
||||
<ul
|
||||
className="inline with-separator"
|
||||
>
|
||||
<li>
|
||||
Created by
|
||||
<a
|
||||
href="mailto:jeff.avallone@gmail.com"
|
||||
>
|
||||
Jeff Avallone
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Generated images licensed:
|
||||
<a
|
||||
href="http://creativecommons.org/licenses/by/3.0/"
|
||||
rel="license"
|
||||
>
|
||||
<img
|
||||
alt="Creative Commons CC-BY-3.0 License"
|
||||
src="https://licensebuttons.net/l/by/3.0/80x15.png"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
<Header />
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user