diff --git a/src/components/InstallPrompt/__snapshots__/test.js.snap b/src/components/InstallPrompt/__snapshots__/test.js.snap new file mode 100644 index 0000000..9fa9b76 --- /dev/null +++ b/src/components/InstallPrompt/__snapshots__/test.js.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InstallPrompt rendering 1`] = ` +
+

+ Add Regexper to your home screen? +

+
+ + +
+
+`; diff --git a/src/components/InstallPrompt/index.js b/src/components/InstallPrompt/index.js new file mode 100644 index 0000000..afd4f8b --- /dev/null +++ b/src/components/InstallPrompt/index.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import style from './style.module.css'; + +const InstallPrompt = ({ onAccept, onReject }) => ( +
+

Add Regexper to your home screen?

+
+ + +
+
+); + +InstallPrompt.propTypes = { + onAccept: PropTypes.func.isRequired, + onReject: PropTypes.func.isRequired +}; + +export default InstallPrompt; diff --git a/src/components/InstallPrompt/style.module.css b/src/components/InstallPrompt/style.module.css new file mode 100644 index 0000000..072c370 --- /dev/null +++ b/src/components/InstallPrompt/style.module.css @@ -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; + } + } +} diff --git a/src/components/InstallPrompt/test.js b/src/components/InstallPrompt/test.js new file mode 100644 index 0000000..f3a0d12 --- /dev/null +++ b/src/components/InstallPrompt/test.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import InstallPrompt from 'components/InstallPrompt'; + +describe('InstallPrompt', () => { + test('rendering', () => { + const component = shallow( + + ); + expect(component).toMatchSnapshot(); + }); +});