Merge pull request #34 from likhith-deriv/likhith/76914/migrate-popov…

…er-message-checkbox-component-to-tsx

likhith/migrated popover message checkbox component to tsx

packages/components/src/components/checkbox/checkbox.tsx

@@ -3,14 +3,14 @@ import React from 'react';
 import Icon from '../icon';
 import Text from '../text';
 
-type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value'> & {
+type TCheckBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'value' | 'label'> & {
     className?: string;
     classNameLabel?: string;
     defaultChecked?: boolean;
     disabled?: boolean;
     greyDisabled?: boolean;
     id?: string;
-    label: string;
+    label: React.ReactElement;
     onChange: (e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
     value?: boolean;
     withTabIndex?: number;

packages/components/src/components/popover-message-checkbox/index.ts

@@ -0,0 +1,3 @@
+import PopoverMessageCheckbox from './popover-message-checkbox';
+
+export default PopoverMessageCheckbox;

packages/components/src/components/popover-message-checkbox/popover-message-checkbox.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Checkbox from '../checkbox';
+
+type TPopoverMessageCheckbox = {
+    defaultChecked?: boolean;
+    message: string;
+    name?: string;
+    onChange: React.FormEventHandler<HTMLInputElement> &
+        ((e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLSpanElement>) => void);
+    checkboxLabel: React.ReactElement;
+};
+
+const PopoverMessageCheckbox = ({
+    checkboxLabel,
+    defaultChecked,
+    onChange,
+    message,
+    name,
+}: TPopoverMessageCheckbox) => (
+    <React.Fragment>
+        {message}
+        <Checkbox defaultChecked={defaultChecked} onChange={onChange} name={name} label={checkboxLabel} />
+    </React.Fragment>
+);
+
+export default PopoverMessageCheckbox;