From 9200c1a8e322f46ff76cd8a0d2dcf406bda37a79 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Tue, 15 Jan 2019 20:28:21 -0500
Subject: [PATCH] Adding InstallPrompt component

---
 .../InstallPrompt/__snapshots__/test.js.snap  | 28 ++++++++++++++
 src/components/InstallPrompt/index.js         | 21 ++++++++++
 src/components/InstallPrompt/style.module.css | 38 +++++++++++++++++++
 src/components/InstallPrompt/test.js          | 13 +++++++
 4 files changed, 100 insertions(+)
 create mode 100644 src/components/InstallPrompt/__snapshots__/test.js.snap
 create mode 100644 src/components/InstallPrompt/index.js
 create mode 100644 src/components/InstallPrompt/style.module.css
 create mode 100644 src/components/InstallPrompt/test.js

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`] = `
+<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>
+`;
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 }) => (
+  <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;
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(
+      <InstallPrompt onReject={ jest.fn() } onAccept={ jest.fn() } />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});