From 100bfa7b5bc5a488f78e9bf90589911e5cc8927d Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Mon, 27 Apr 2020 13:49:59 +0530
Subject: [PATCH] Extracted common Input and Button components

no issue

- Add new InputField common component for input fields with label
- Add new ActionButton common component for action <button>
---
 .../src/components/common/ActionButton.js     | 39 +++++++++++++++
 .../src/components/common/InputField.js       | 47 +++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 ghost/portal/src/components/common/ActionButton.js
 create mode 100644 ghost/portal/src/components/common/InputField.js

diff --git a/ghost/portal/src/components/common/ActionButton.js b/ghost/portal/src/components/common/ActionButton.js
new file mode 100644
index 0000000000..3ac5d2b054
--- /dev/null
+++ b/ghost/portal/src/components/common/ActionButton.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const Styles = ({brandColor, disabled, style = {}}) => {
+    return {
+        button: {
+            display: 'inline-block',
+            padding: '0 1.8rem',
+            height: '44px',
+            border: '0',
+            fontSize: '1.5rem',
+            lineHeight: '42px',
+            fontWeight: '600',
+            textAlign: 'center',
+            textDecoration: 'none',
+            whiteSpace: 'nowrap',
+            borderRadius: '5px',
+            cursor: 'pointer',
+            transition: '.4s ease',
+            color: '#fff',
+            backgroundColor: disabled ? 'grey' : (brandColor || '#3eb0ef'),
+            boxShadow: 'none',
+            userSelect: 'none',
+            width: '100%',
+            marginBottom: '12px',
+            ...(style.button || {}) // Override any custom style
+        }
+    };
+};
+
+function ActionButton({label, onClick, disabled, brandColor, style}) {
+    let Style = Styles({disabled, brandColor, style});
+    return (
+        <button onClick={e => onClick(e)} style={Style.button} disabled={disabled}>
+            {label}
+        </button>
+    );
+}
+
+export default ActionButton;
diff --git a/ghost/portal/src/components/common/InputField.js b/ghost/portal/src/components/common/InputField.js
new file mode 100644
index 0000000000..064c247336
--- /dev/null
+++ b/ghost/portal/src/components/common/InputField.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+const Styles = ({style = {}}) => {
+    return {
+        input: {
+            display: 'block',
+            padding: '0 .6em',
+            width: '100%',
+            height: '44px',
+            outline: '0',
+            border: '1px solid #c5d2d9',
+            color: 'inherit',
+            textDecoration: 'none',
+            background: '#fff',
+            borderRadius: '9px',
+            fontSize: '14px',
+            marginBottom: '12px',
+            boxSizing: 'border-box',
+            ...(style.input || {}) // Override any custom style
+        },
+        label: {
+            marginBottom: '3px',
+            fontSize: '12px',
+            fontWeight: '700',
+            ...(style.label || {}) // Override any custom style
+        }
+    };
+};
+
+function InputField({name, label, type, value, placeholder, onChange, style}) {
+    const Style = Styles({style});
+    return (
+        <>
+            <label htmlFor={name} style={Style.label}> {label} </label>
+            <input
+                type={type}
+                name={name}
+                placeholder={placeholder}
+                value={value}
+                onChange={e => onChange(e, name)}
+                style={Style.input}
+            />
+        </>
+    );
+}
+
+export default InputField;