Add checkbox

[MAILPOET-2738]

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

@@ -191,6 +191,13 @@ $form-placement-option-oval-border: #969ca1;
   width: 13px;
 }
 
+.form-placement-settings-check {
+  height: 13px;
+  pointer-events: none;
+  width: 13px;
+  z-index: 4;
+}
+
 .form-placement-settings-icon {
   height: 14px;
   pointer-events: none;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import {
+  SVG,
+  Path,
+  Rect,
+  G,
+} from '@wordpress/components';
+
+export default (
+  <SVG width="13" height="13" viewBox="4 4 16 16" xmlns="http://www.w3.org/2000/svg">
+    <G id="icons/checkbox-on-small" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <Path d="M12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 Z M15.5939818,8.20494484 C15.1497095,7.86124495 14.5235958,7.95992422 14.1955177,8.42535116 L14.1955177,8.42535116 L11.2218999,12.6438652 L9.73479332,10.9561217 C9.36019283,10.530981 8.72753928,10.5044698 8.32172209,10.8969074 C7.91590488,11.289345 7.89059874,11.9521231 8.26519924,12.3772638 L8.26519924,12.3772638 L10.5728715,14.9962817 C10.9986562,15.4795122 11.7391892,15.4370557 12.1120948,14.9080343 L12.1120948,14.9080343 L15.8043703,9.66999857 C16.1324484,9.20457165 16.0382543,8.54864475 15.5939818,8.20494484 Z" id="Combined-Shape" fill="#ff5301" fillRule="nonzero" />
+    </G>
+  </SVG>
+);

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 
 import SettingsIcon from './settings_icon';
+import CheckIcon from './checkbox_icon';
 
 type Props = {
   label: string,
@@ -51,9 +52,17 @@ const FormPlacementOption = ({
             {SettingsIcon}
           </div>
           {
-            hover
+            hover && !active
             && <div className="form-placement-settings-oval" />
           }
+          {
+            active
+            && (
+              <div className="form-placement-settings-check">
+                {CheckIcon}
+              </div>
+            )
+          }
         </div>
         <div className="form-placement-option-icon">
           {icon}