Add YesNo component

[MAILPOET-2773]

assets/js/src/common/form/toggle/toggle.tsx

@@ -11,7 +11,7 @@ const Toggle = ({
   onCheck,
   ...attributes
 }: Props) => (
-  <label
+  <div
     className={
       classnames({
         'mailpoet-form-toggle': true,
@@ -25,7 +25,7 @@ const Toggle = ({
       {...attributes}
     />
     <span className="mailpoet-form-toggle-control" />
-  </label>
+  </div>
 );
 
 export default Toggle;

assets/js/src/common/form/yesno/yesno.tsx

@@ -0,0 +1,42 @@
+import React, { InputHTMLAttributes } from 'react';
+import classnames from 'classnames';
+
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+  name: string,
+  onCheck: (isChecked: boolean) => void,
+  showError?: boolean,
+};
+
+const YesNo = ({
+  onCheck,
+  showError,
+  ...attributes
+}: Props) => (
+  <div
+    className={
+      classnames({
+        'mailpoet-form-yesno': true,
+        'mailpoet-form-yesno-error': showError,
+      })
+    }
+  >
+    <label>
+      <input
+        type="radio"
+        onChange={(e) => onCheck(true)}
+        {...attributes}
+      />
+      <span className="mailpoet-form-yesno-control mailpoet-form-yesno-yes" />
+    </label>
+    <label>
+      <input
+        type="radio"
+        onChange={(e) => onCheck(false)}
+        {...attributes}
+      />
+      <span className="mailpoet-form-yesno-control mailpoet-form-yesno-no" />
+    </label>
+  </div>
+);
+
+export default YesNo;