From a1df6acdcc2fa83c0aa6760bba13914fc900e016 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 25 Feb 2020 09:52:15 +0100
Subject: [PATCH] Add Form Styles Panel

[MAILPOET-2600]
---
 .../form_settings/form_settings.jsx           |  5 ++++
 .../form_settings/styles_settings_panel.jsx   | 24 +++++++++++++++++++
 views/form/editor.html                        |  1 +
 3 files changed, 30 insertions(+)
 create mode 100644 assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx

diff --git a/assets/js/src/form_editor/components/form_settings/form_settings.jsx b/assets/js/src/form_editor/components/form_settings/form_settings.jsx
index 65cc66b009..a723340c24 100644
--- a/assets/js/src/form_editor/components/form_settings/form_settings.jsx
+++ b/assets/js/src/form_editor/components/form_settings/form_settings.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { partial } from 'lodash';
 import BasicSettingsPanel from './basic_settings_panel.jsx';
+import StylesSettingsPanel from './styles_settings_panel.jsx';
 import FormPlacementPanel from './form_placement_panel.jsx';
 import CustomCssPanel from './custom_css_panel.jsx';
 
@@ -19,6 +20,10 @@ export default () => {
         isOpened={openedPanels.includes('basic-settings')}
         onToggle={partial(toggleSidebarPanel, 'basic-settings')}
       />
+      <StylesSettingsPanel
+        isOpened={openedPanels.includes('styles-settings')}
+        onToggle={partial(toggleSidebarPanel, 'styles-settings')}
+      />
       <FormPlacementPanel
         isOpened={openedPanels.includes('form-placement')}
         onToggle={partial(toggleSidebarPanel, 'form-placement')}
diff --git a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
new file mode 100644
index 0000000000..2500548f38
--- /dev/null
+++ b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
@@ -0,0 +1,24 @@
+import {
+  Panel,
+  PanelBody,
+} from '@wordpress/components';
+import React from 'react';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+
+const BasicSettingsPanel = ({ onToggle, isOpened }) => {
+  return (
+    <Panel>
+      <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} opened={isOpened} onToggle={onToggle}>
+        Styles
+      </PanelBody>
+    </Panel>
+  );
+};
+
+BasicSettingsPanel.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  isOpened: PropTypes.bool.isRequired,
+};
+
+export default BasicSettingsPanel;
diff --git a/views/form/editor.html b/views/form/editor.html
index 75162c205c..0dfb30dff8 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -34,6 +34,7 @@
   'changesNotSaved': __('Your changes you made may not be saved'),
   'form': __('Form'),
   'formSettings': _x('Settings', 'A settings section heading'),
+  'formSettingsStyles': __('Styles'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
   'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
   'formPlacement': _x('Form Placement', 'A settings section heading'),