Breaking Header and Footer out into components
For forthcoming i18n setup
This commit is contained in:
parent
4923bbd985
commit
63766e84e9
@ -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;
|
||||
|
20
src/components/Footer.js
Normal file
20
src/components/Footer.js
Normal file
@ -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;
|
13
src/components/Footer.test.js
Normal file
13
src/components/Footer.test.js
Normal file
@ -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();
|
||||
});
|
19
src/components/Header.js
Normal file
19
src/components/Header.js
Normal file
@ -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;
|
26
src/components/Header.test.js
Normal file
26
src/components/Header.test.js
Normal file
@ -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'
|
||||
};
|
||||
});
|
||||
|
30
src/components/__snapshots__/Footer.test.js.snap
Normal file
30
src/components/__snapshots__/Footer.test.js.snap
Normal file
@ -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>
|
||||
`;
|
28
src/components/__snapshots__/Header.test.js.snap
Normal file
28
src/components/__snapshots__/Header.test.js.snap
Normal file
@ -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>
|
||||
`;
|
||||
|
@ -18,7 +18,5 @@ export default renderToString(
|
||||
<p>Most popular ad blockers will prevent these tools from sending any tracking data, and doing so will <b>not</b> impact the performance of this app. Regexper is not supported by ad revenue or sales of any kind. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.</p>
|
||||
</Message>
|
||||
</noscript>
|
||||
|
||||
<div id="root"></div>
|
||||
</PageTemplate>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user