Create toggle component

[MAILPOET-2738]

assets/css/src/components/_toggle.scss

@@ -0,0 +1,82 @@
+input[type=checkbox].mailpoet-toggle {
+  display: none;
+
+  // add default box-sizing for this scope
+  &,
+  &:after,
+  &:before,
+  *,
+  *:after,
+  *:before,
+  + .mailpoet-toggle-button {
+    box-sizing: border-box;
+
+    &::selection {
+      background: none;
+    }
+  }
+
+  + .mailpoet-toggle-button {
+    cursor: pointer;
+    display: block;
+    height: 24px;
+    outline: 0;
+    position: relative;
+    user-select: none;
+    width: 40px;
+
+    &:after,
+    &:before {
+      content: '';
+      display: block;
+      height: 22px;
+      position: relative;
+      width: 22px;
+    }
+
+    &:after {
+      left: -3px;
+      top: -3px;
+    }
+
+    &:before {
+      display: none;
+    }
+  }
+
+  &:checked + .mailpoet-toggle-button:after {
+    left: 14px;
+  }
+}
+
+$very-light-blue: #e5e9f8;
+$apricot: #f5a278;
+$pale-grey: #fdfdff;
+
+// themes
+.mailpoet-toggle-light {
+  + .mailpoet-toggle-button {
+    background: $pale-grey;
+    border: solid 1px $very-light-blue;
+    border-radius: 2em;
+    padding: 2px;
+    transition: all .4s ease;
+
+    &:after {
+      background-color: #fff;
+      border: solid 1px $very-light-blue;
+      border-radius: 50%;
+      box-shadow: 0 4px 8px 0 rgba(220, 220, 220, .5);
+      transition: all .2s ease;
+    }
+  }
+
+  &:checked + .mailpoet-toggle-button {
+    background: $apricot;
+    border: solid 1px $apricot;
+
+    &:after {
+      border: solid 1px $apricot;
+    }
+  }
+}

assets/css/src/mailpoet-plugin.scss

@@ -30,6 +30,7 @@
 @import 'components/reviewRequest';
 @import 'components/stats';
 @import 'components/importExport';
+@import 'components/toggle';
 @import 'components/newsletterEditor/mixins/transitions';
 @import 'components/newsletterEditor/variables';
 @import 'components/newsletterEditor/common';

assets/js/src/common/toggle.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+type Props = {
+  checked: boolean,
+  onCheck: (checked: boolean) => void,
+  name?: string,
+};
+
+const Toggle = ({ checked, onCheck, name }: Props) => (
+  <>
+    <input
+      className="mailpoet-toggle mailpoet-toggle-light"
+      id={`mailpoet-toggle-${name}`}
+      type="checkbox"
+      checked={checked}
+      onChange={(event) => onCheck(event.target.checked)}
+      key={`toggle-input-${name}`}
+    />
+    {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+    <label
+      className="mailpoet-toggle-button"
+      htmlFor={`mailpoet-toggle-${name}`}
+      key={`toggle-label-${name}`}
+    />
+  </>
+);
+
+export default Toggle;

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

@@ -5,9 +5,11 @@ import { useSelect } from '@wordpress/data';
 import FormPlacementOption from './form_placement_option';
 import Icon from './below_pages_icon';
 import Modal from '../../../../common/modal/modal.jsx';
+import Toggle from '../../../../common/toggle';
 
 const BelowPages = () => {
   const [displaySettings, setDisplaySettings] = useState(false);
+  const [test, setTest] = useState(true); // TODO debug only, remove
 
   const placeFormBellowAllPages = useSelect(
     (select) => select('mailpoet-form-editor').placeFormBellowAllPages(),
@@ -37,6 +39,11 @@ const BelowPages = () => {
             <p>
               {MailPoet.I18n.t('placeFormBellowPagesDescription')}
             </p>
+            <Toggle
+              name="xz"
+              checked={test}
+              onCheck={setTest}
+            />
           </Modal>
         )
       }