root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Opening the privacy policy as an overlay when possible

Browse Source 
It still exists as a separate page, but will open as an overlay for a
simple click
This commit is contained in:
Jeff Avallone
2019-01-18 16:24:10 -05:00
parent 83de8ebcbc
commit 2c8b779793
8 changed files with 550 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/__snapshots__/test.js.snap
+391 -93
View File
@@ -1,103 +1,401 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header rendering 1`] = `
<header
className="header"
data-banner="testing"
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
exports[`Header closing the Privacy Policy modal 1`] = `
<Fragment>
<Modal
ariaHideApp={true}
bodyOpenClassName="ReactModal__Body--open"
closeTimeoutMS={0}
isOpen={true}
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<WithMergedOptions(TransComponent)>
Source on GitLab
</WithMergedOptions(TransComponent)>
</a>
</li>
<li>
<mockConstructor
to="/privacy"
>
<WithMergedOptions(TransComponent)>
Privacy Policy
</WithMergedOptions(TransComponent)>
</mockConstructor>
</li>
<li>
<LoadNamespace(InstallPrompt) />
</li>
<li
data-requires-js={true}
<LoadNamespace(PrivacyPolicy) />
<a
className="modalClose"
href="#close"
onClick={[Function]}
>
<LoadNamespace(LocaleSwitcher) />
</li>
</ul>
</header>
<XSquare
color="currentColor"
size="24"
/>
</a>
</Modal>
<header
className="header"
data-banner={null}
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<WithMergedOptions(TransComponent)>
Source on GitLab
</WithMergedOptions(TransComponent)>
</a>
</li>
<li>
<mockConstructor
onClick={[Function]}
to="/privacy"
>
<WithMergedOptions(TransComponent)>
Privacy Policy
</WithMergedOptions(TransComponent)>
</mockConstructor>
</li>
<li>
<LoadNamespace(InstallPrompt) />
</li>
<li
data-requires-js={true}
>
<LoadNamespace(LocaleSwitcher) />
</li>
</ul>
</header>
</Fragment>
`;
exports[`Header closing the Privacy Policy modal 2`] = `
<Fragment>
<Modal
ariaHideApp={true}
bodyOpenClassName="ReactModal__Body--open"
closeTimeoutMS={0}
isOpen={false}
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</Modal>
<header
className="header"
data-banner={null}
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<WithMergedOptions(TransComponent)>
Source on GitLab
</WithMergedOptions(TransComponent)>
</a>
</li>
<li>
<mockConstructor
onClick={[Function]}
to="/privacy"
>
<WithMergedOptions(TransComponent)>
Privacy Policy
</WithMergedOptions(TransComponent)>
</mockConstructor>
</li>
<li>
<LoadNamespace(InstallPrompt) />
</li>
<li
data-requires-js={true}
>
<LoadNamespace(LocaleSwitcher) />
</li>
</ul>
</header>
</Fragment>
`;
exports[`Header opening the Privacy Policy modal 1`] = `
<Fragment>
<Modal
ariaHideApp={true}
bodyOpenClassName="ReactModal__Body--open"
closeTimeoutMS={0}
isOpen={true}
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</Modal>
<header
className="header"
data-banner={null}
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<WithMergedOptions(TransComponent)>
Source on GitLab
</WithMergedOptions(TransComponent)>
</a>
</li>
<li>
<mockConstructor
onClick={[Function]}
to="/privacy"
>
<WithMergedOptions(TransComponent)>
Privacy Policy
</WithMergedOptions(TransComponent)>
</mockConstructor>
</li>
<li>
<LoadNamespace(InstallPrompt) />
</li>
<li
data-requires-js={true}
>
<LoadNamespace(LocaleSwitcher) />
</li>
</ul>
</header>
</Fragment>
`;
exports[`Header rendering 1`] = `
<Fragment>
<Modal
ariaHideApp={true}
bodyOpenClassName="ReactModal__Body--open"
closeTimeoutMS={0}
isOpen={false}
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
>
<LoadNamespace(PrivacyPolicy) />
<a
className="modalClose"
href="#close"
onClick={[Function]}
>
<XSquare
color="currentColor"
size="24"
/>
</a>
</Modal>
<header
className="header"
data-banner="testing"
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<WithMergedOptions(TransComponent)>
Source on GitLab
</WithMergedOptions(TransComponent)>
</a>
</li>
<li>
<mockConstructor
onClick={[Function]}
to="/privacy"
>
<WithMergedOptions(TransComponent)>
Privacy Policy
</WithMergedOptions(TransComponent)>
</mockConstructor>
</li>
<li>
<LoadNamespace(InstallPrompt) />
</li>
<li
data-requires-js={true}
>
<LoadNamespace(LocaleSwitcher) />
</li>
</ul>
</header>
</Fragment>
`;
exports[`Header rendering with no banner 1`] = `
<header
className="header"
data-banner={null}
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
<Fragment>
<Modal
ariaHideApp={true}
bodyOpenClassName="ReactModal__Body--open"
closeTimeoutMS={0}
isOpen={false}
onRequestClose={[Function]}
parentSelector={[Function]}
portalClassName="ReactModalPortal"
role="dialog"
shouldCloseOnEsc={true}
shouldCloseOnOverlayClick={true}
shouldFocusAfterRender={true}
shouldReturnFocusAfterClose={true}
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<WithMergedOptions(TransComponent)>
Source on GitLab
</WithMergedOptions(TransComponent)>
</a>
</li>
<li>
<mockConstructor
to="/privacy"
>
<WithMergedOptions(TransComponent)>
Privacy Policy
</WithMergedOptions(TransComponent)>
</mockConstructor>
</li>
<li>
<LoadNamespace(InstallPrompt) />
</li>
<li
data-requires-js={true}
<LoadNamespace(PrivacyPolicy) />
<a
className="modalClose"
href="#close"
onClick={[Function]}
>
<LoadNamespace(LocaleSwitcher) />
</li>
</ul>
</header>
<XSquare
color="currentColor"
size="24"
/>
</a>
</Modal>
<header
className="header"
data-banner={null}
>
<h1>
<mockConstructor
to="/"
>
Regexper
</mockConstructor>
</h1>
<ul
className="list"
>
<li>
<a
href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank"
>
<Gitlab
color="currentColor"
size="24"
/>
<WithMergedOptions(TransComponent)>
Source on GitLab
</WithMergedOptions(TransComponent)>
</a>
</li>
<li>
<mockConstructor
onClick={[Function]}
to="/privacy"
>
<WithMergedOptions(TransComponent)>
Privacy Policy
</WithMergedOptions(TransComponent)>
</mockConstructor>
</li>
<li>
<LoadNamespace(InstallPrompt) />
</li>
<li
data-requires-js={true}
>
<LoadNamespace(LocaleSwitcher) />
</li>
</ul>
</header>
</Fragment>
`;
src/components/Header/index.js
+72 -35
View File
@@ -1,52 +1,89 @@
import React from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-modal';
import { Link } from 'gatsby';
import { withNamespaces, Trans } from 'react-i18next';
import GitlabIcon from 'react-feather/dist/icons/gitlab';
import CloseIcon from 'react-feather/dist/icons/x-square';
import LocaleSwitcher from 'components/LocaleSwitcher';
import InstallPrompt from 'components/InstallPrompt';
import PrivacyPolicy from 'components/PrivacyPolicy';
import style from './style.module.css';
export const Header = ({ banner }) => (
<header
className={ style.header }
data-banner={ banner || null }>
<h1>
<Link to="/">Regexper</Link>
</h1>
class Header extends React.PureComponent {
state = {
showModal: false
}
<ul className={ style.list }>
<li>
<a href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank">
<GitlabIcon />
<Trans>Source on GitLab</Trans>
static propTypes = {
banner: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string
]).isRequired
}
handleOpen = event => {
event.preventDefault();
this.setState({ showModal: true });
}
handleClose = event => {
event.preventDefault();
this.setState({ showModal: false });
}
render() {
const { banner } = this.props;
const { showModal } = this.state;
return <>
<Modal
isOpen={ showModal }
onRequestClose={ this.handleClose }
shouldCloseOnOverlayClick={ true }>
<PrivacyPolicy />
<a
href="#close"
className={ style.modalClose }
onClick={ this.handleClose }>
<CloseIcon />
</a>
</li>
<li>
<Link to="/privacy">
<Trans>Privacy Policy</Trans>
</Link>
</li>
<li>
<InstallPrompt />
</li>
<li data-requires-js>
<LocaleSwitcher />
</li>
</ul>
</header>
);
</Modal>
<header
className={ style.header }
data-banner={ banner || null }>
<h1>
<Link to="/">Regexper</Link>
</h1>
Header.propTypes = {
banner: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.string
]).isRequired
};
<ul className={ style.list }>
<li>
<a href="https://gitlab.com/javallone/regexper-static"
rel="external noopener noreferrer"
target="_blank">
<GitlabIcon />
<Trans>Source on GitLab</Trans>
</a>
</li>
<li>
<Link to="/privacy" onClick={ this.handleOpen }>
<Trans>Privacy Policy</Trans>
</Link>
</li>
<li>
<InstallPrompt />
</li>
<li data-requires-js>
<LocaleSwitcher />
</li>
</ul>
</header>
</>;
}
}
export { Header };
export default withNamespaces()(Header);
src/components/Header/style.module.css
+20
View File
@@ -66,3 +66,23 @@
}
}
}
.modalClose {
position: absolute;
top: 3rem;
right: 2rem;
line-height: 2.8rem;
padding: 1rem;
&:hover svg,
&:active svg {
color: var(--color-white);
}
& svg {
display: inline-block;
width: 2.8rem;
height: 2.8rem;
vertical-align: middle;
}
}
src/components/Header/test.js
+28
View File
@@ -17,4 +17,32 @@ describe('Header', () => {
);
expect(component).toMatchSnapshot();
});
test('opening the Privacy Policy modal', () => {
const component = shallow(
<Header banner={ false } />
);
const eventObj = { preventDefault: jest.fn() };
component.instance().handleOpen(eventObj);
expect(eventObj.preventDefault).toHaveBeenCalled();
expect(component).toMatchSnapshot();
});
test('closing the Privacy Policy modal', () => {
const component = shallow(
<Header banner={ false } />
);
const eventObj = { preventDefault: jest.fn() };
component.setState({ showModal: true });
expect(component).toMatchSnapshot();
component.instance().handleClose(eventObj);
expect(eventObj.preventDefault).toHaveBeenCalled();
expect(component).toMatchSnapshot();
});
});
src/components/Message/style.module.css
+4
View File
@@ -5,6 +5,9 @@
color: var(--color-black);
margin: var(--spacing-margin) 0;
box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
max-height: 100%;
display: flex;
flex-direction: column;
}
.header {
@@ -25,6 +28,7 @@
.content {
padding: var(--spacing-margin);
overflow: auto;
& p {
margin-top: 0;