Replace onChange prop with onCheck for Radio and Checkbox

onChange is already defined for HTML inputs and returns event, but we want to return boolean/array of values

[MAILPOET-2773]

assets/js/src/common/form/checkbox/_stories/checkbox.tsx

@@ -19,14 +19,14 @@ export const Checkboxes = () => (
     <Heading level={3}>Inline individual checkboxes</Heading>
     <div>
       <Checkbox
-        onChange={action('checkbox-individual-1')}
+        onCheck={action('checkbox-individual-1')}
         name="story"
         value="1"
       >
         Option 1
       </Checkbox>
       <Checkbox
-        onChange={action('checkbox-individual-2')}
+        onCheck={action('checkbox-individual-2')}
         name="story"
         value="2"
       >
@@ -39,7 +39,7 @@ export const Checkboxes = () => (
     <div>
       <Checkbox
         isFullWidth
-        onChange={action('checkbox-full-individual-1')}
+        onCheck={action('checkbox-full-individual-1')}
         name="story-full"
         value="1"
       >
@@ -47,7 +47,7 @@ export const Checkboxes = () => (
       </Checkbox>
       <Checkbox
         isFullWidth
-        onChange={action('checkbox-full-individual-2')}
+        onCheck={action('checkbox-full-individual-2')}
         name="story-full"
         value="2"
       >

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

@@ -2,15 +2,15 @@ import React, { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
+  onCheck: (isChecked: boolean) => void,
   children?: React.ReactNode,
   isFullWidth?: boolean,
-  onChange?: (boolean) => void,
 };
 
 const Checkbox = ({
   children,
   isFullWidth,
-  onChange,
+  onCheck,
   ...attributes
 }: Props) => (
   <label
@@ -23,7 +23,7 @@ const Checkbox = ({
   >
     <input
       type="checkbox"
-      onChange={(e) => onChange(e.target.checked)}
+      onChange={(e) => onCheck(e.target.checked)}
       {...attributes}
     />
     <span className="mailpoet-form-checkbox-control" />

assets/js/src/common/form/checkbox/group.tsx

@@ -45,7 +45,7 @@ const CheckboxGroup = ({
           key={label}
           name={name}
           value={value}
-          onChange={(isChecked) => handleChange(value, isChecked)}
+          onCheck={(isChecked) => handleChange(value, isChecked)}
           isFullWidth={isFullWidth}
           {...attributes} // eslint-disable-line react/jsx-props-no-spreading
         >

assets/js/src/common/form/radio/_stories/radio.tsx

@@ -19,14 +19,14 @@ export const Radios = () => (
     <Heading level={3}>Inline individual radios</Heading>
     <div>
       <Radio
-        onChange={action('radio-individual-1')}
+        onCheck={action('radio-individual-1')}
         name="story"
         value="1"
       >
         Option 1
       </Radio>
       <Radio
-        onChange={action('radio-individual-2')}
+        onCheck={action('radio-individual-2')}
         name="story"
         value="2"
       >
@@ -39,7 +39,7 @@ export const Radios = () => (
     <div>
       <Radio
         isFullWidth
-        onChange={action('radio-full-individual-1')}
+        onCheck={action('radio-full-individual-1')}
         name="story-full"
         value="1"
       >
@@ -47,7 +47,7 @@ export const Radios = () => (
       </Radio>
       <Radio
         isFullWidth
-        onChange={action('radio-full-individual-2')}
+        onCheck={action('radio-full-individual-2')}
         name="story-full"
         value="2"
       >

assets/js/src/common/form/radio/group.tsx

@@ -12,7 +12,7 @@ type Props = {
   options: RadioProps[],
   defaultValue?: RadioValueType,
   isFullWidth?: boolean,
-  onChange?: (RadioValueType) => void,
+  onChange?: (value: RadioValueType) => void,
 };
 
 const RadioGroup = ({
@@ -37,7 +37,7 @@ const RadioGroup = ({
           key={label}
           name={name}
           value={value}
-          onChange={() => handleChange(value)}
+          onCheck={() => handleChange(value)}
           isFullWidth={isFullWidth}
           {...attributes} // eslint-disable-line react/jsx-props-no-spreading
         >

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

@@ -2,15 +2,15 @@ import React, { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
+  onCheck: (isChecked: boolean) => void,
   children?: React.ReactNode,
   isFullWidth?: boolean,
-  onChange?: (boolean) => void,
 };
 
 const Radio = ({
   children,
   isFullWidth,
-  onChange,
+  onCheck,
   ...attributes
 }: Props) => (
   <label
@@ -23,7 +23,7 @@ const Radio = ({
   >
     <input
       type="radio"
-      onChange={(e) => onChange(e.target.checked)}
+      onChange={(e) => onCheck(e.target.checked)}
       {...attributes}
     />
     <span className="mailpoet-form-radio-control" />