Breaking Header and Footer out into components
For forthcoming i18n setup
This commit is contained in:
Jeff Avallone
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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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