Adding InstallPrompt component
This commit is contained in:
parent
46c956e3da
commit
9200c1a8e3
28
src/components/InstallPrompt/__snapshots__/test.js.snap
Normal file
28
src/components/InstallPrompt/__snapshots__/test.js.snap
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`InstallPrompt rendering 1`] = `
|
||||||
|
<div
|
||||||
|
className="install"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="cta"
|
||||||
|
>
|
||||||
|
Add Regexper to your home screen?
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
className="actions"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="primary"
|
||||||
|
onClick={[MockFunction]}
|
||||||
|
>
|
||||||
|
Add It
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={[MockFunction]}
|
||||||
|
>
|
||||||
|
No Thanks
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
21
src/components/InstallPrompt/index.js
Normal file
21
src/components/InstallPrompt/index.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import style from './style.module.css';
|
||||||
|
|
||||||
|
const InstallPrompt = ({ onAccept, onReject }) => (
|
||||||
|
<div className={ style.install }>
|
||||||
|
<p className={ style.cta }>Add Regexper to your home screen?</p>
|
||||||
|
<div className={ style.actions }>
|
||||||
|
<button className={ style.primary } onClick={ onAccept }>Add It</button>
|
||||||
|
<button onClick={ onReject }>No Thanks</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
InstallPrompt.propTypes = {
|
||||||
|
onAccept: PropTypes.func.isRequired,
|
||||||
|
onReject: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InstallPrompt;
|
38
src/components/InstallPrompt/style.module.css
Normal file
38
src/components/InstallPrompt/style.module.css
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
@import url('../../globals.module.css');
|
||||||
|
|
||||||
|
.install {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--color-tan);
|
||||||
|
color: var(--color-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
margin: 0;
|
||||||
|
padding: var(--spacing-margin);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding: var(--spacing-margin);
|
||||||
|
|
||||||
|
& button {
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: 2.8rem;
|
||||||
|
border: 0 none;
|
||||||
|
background: var(--control-gradient);
|
||||||
|
color: var(--color-black);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
width: 40vw;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
13
src/components/InstallPrompt/test.js
Normal file
13
src/components/InstallPrompt/test.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { shallow } from 'enzyme';
|
||||||
|
|
||||||
|
import InstallPrompt from 'components/InstallPrompt';
|
||||||
|
|
||||||
|
describe('InstallPrompt', () => {
|
||||||
|
test('rendering', () => {
|
||||||
|
const component = shallow(
|
||||||
|
<InstallPrompt onReject={ jest.fn() } onAccept={ jest.fn() } />
|
||||||
|
);
|
||||||
|
expect(component).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user