Merge pull request #25 from yauheni-kryzhyk-deriv/yauheni/76882/formc…

…ancelbutton_ts_migration_

Yauheni/76882/formcancelbutton ts migration

packages/appstore/src/components/elements/account-wizard/account-wizard.tsx

@@ -333,7 +333,7 @@ const AccountWizard: React.FC<TAccountWizard> = (props: TAccountWizard) => {
                 {wizard_steps}
             </Wizard>
             <DesktopWrapper>
-                <FormCancelButton label={localize('Cancel')} is_absolute onClick={onCancel} />
+                <FormCancelButton label={localize('Cancel')} is_absolute onCancel={onCancel} />
             </DesktopWrapper>
         </React.Fragment>
     );

packages/components/src/components/button/button.tsx

@@ -4,7 +4,7 @@ import ButtonLoading from './button_loading';
 import Icon from '../icon';
 import Text from '../text';
 
-type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+export type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     alternate: boolean;
     blue: boolean;
     classNameSpan: string;

packages/components/src/components/form-cancel-button/form-cancel-button.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+import Button, { TButtonProps } from '../button/button';
+
+type TFormCancelButton = Partial<TButtonProps> & {
+    className?: string;
+    is_absolute?: boolean;
+    is_center?: boolean;
+    is_disabled?: boolean;
+    label: string;
+    onCancel: () => void;
+};
+
+const FormCancelButton = ({
+    className,
+    is_center = false,
+    is_absolute = false,
+    label,
+    onCancel,
+    ...props
+}: TFormCancelButton) => {
+    return (
+        <div
+            className={classNames('dc-form-cancel-button', className, {
+                'dc-form-cancel-button--absolute': is_absolute,
+                'dc-form-cancel-button--center': is_center,
+                'dc-form-cancel-button--relative': !is_absolute,
+            })}
+        >
+            <Button has_effect onClick={onCancel} text={label} type='button' tertiary large {...props} />
+        </div>
+    );
+};
+
+export default FormCancelButton;

packages/components/src/components/form-cancel-button/index.js → packages/components/src/components/form-cancel-button/index.ts

@@ -1,4 +1,4 @@
-import FormCancelButton from './form-cancel-button.jsx';
+import FormCancelButton from './form-cancel-button';
 import './form-cancel-button.scss';
 
 export default FormCancelButton;