Hover state for form placement component

[MAILPOET-2738]

assets/css/src/components/formEditor/components/_sidebar.scss

@@ -123,10 +123,21 @@ $form-placement-option-oval-border: #969ca1;
   justify-content: space-between;
   margin: 0 16px 16px 0;
   padding: 6px;
+  position: relative;
   text-align: center;
   width: 116px;
 }
 
+.form-placement-settings-overlay {
+  background-color: rgba(0, 0, 0, .3);
+  height: 142px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 116px;
+  z-index: 3;
+}
+
 .form-placement-option-label {
   align-items: center;
   color: $form-placement-option-text-color;
@@ -135,6 +146,7 @@ $form-placement-option-oval-border: #969ca1;
   height: 40px;
   justify-content: center;
   width: 100%;
+  z-index: 2;
 
   p {
     margin-bottom: 0;
@@ -147,6 +159,7 @@ $form-placement-option-oval-border: #969ca1;
   height: 25px;
   justify-content: space-between;
   width: 100%;
+  z-index: 4;
 }
 
 .form-placement-settings-oval {
@@ -163,6 +176,13 @@ $form-placement-option-oval-border: #969ca1;
   }
   height: 14px;
   width: 14px;
+  z-index: 4;
+}
+
+.form-placement-settings-icon-hover {
+  svg {
+    fill: white;
+  }
 }
 
 .form-placement-option-icon {
@@ -176,4 +196,5 @@ $form-placement-option-oval-border: #969ca1;
   margin: 0 auto;
   object-fit: contain;
   width: 76px;
+  z-index: 2;
 }

assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classnames from 'classnames';
 
 import SettingsIcon from './settings_icon';
 
@@ -7,24 +8,44 @@ type Props = {
   icon: JSX.Element,
 }
 
-const FormPlacementOption = ({ label, icon }: Props) => (
+const FormPlacementOption = ({ label, icon }: Props) => {
-  <div className="form-placement-option">
+  const [hover, setHover] = useState(false);
-    <div>
+  return (
-      <div className="form-placement-option-settings">
+    <div
-        <div className="form-placement-settings-icon">
+      className="form-placement-option"
-          {SettingsIcon}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      <div>
+        <div className="form-placement-option-settings">
+          <div
+            className={
+              classnames(
+                'form-placement-settings-icon',
+                { 'form-placement-settings-icon-hover': hover }
+              )
+            }
+          >
+            {SettingsIcon}
+          </div>
+          {
+            hover
+            && <div className="form-placement-settings-oval" />
+          }
+        </div>
+        <div className="form-placement-option-icon">
+          {icon}
         </div>
-        {/* todo next line only show on hover */}
-        <div className="form-placement-settings-oval" />
       </div>
-      <div className="form-placement-option-icon">
+      <div className="form-placement-option-label">
-        {icon}
+        <p>{label}</p>
       </div>
+      {
+        hover
+        && <div className="form-placement-settings-overlay" />
+      }
     </div>
-    <div className="form-placement-option-label">
+  );
-      <p>{label}</p>
+};
-    </div>
-  </div>
-);
 
 export default FormPlacementOption;