WALL-2166 : Base Components - Button

packages/wallets/src/components/Base/WalletButton/WalletButton.tsx

@@ -1,35 +1,81 @@
-import React, { ComponentProps, CSSProperties } from 'react';
+import React, { ButtonHTMLAttributes } from 'react';
 import classNames from 'classnames';
+import { TGenericSizes } from '../types';
+import { WalletText } from '../WalletText';
 import styles from './WalletButton.module.css';
 
-interface WalletButtonProps extends ComponentProps<'button'> {
-    children: React.ReactNode;
-    color?: CSSProperties['color'] | 'primary-light' | 'primary';
+interface WalletButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    color?: 'black' | 'primary-light' | 'primary' | 'white';
+    icon?: React.ReactNode;
     isRounded?: boolean;
-    size?: 'lg' | 'md' | 'sm';
-    variant?: 'contained' | 'outlined' | 'text';
+    size?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
+    text?: React.ReactNode;
+    variant?: 'contained' | 'ghost' | 'outlined';
 }
 
 const WalletButton: React.FC<WalletButtonProps> = ({
-    children,
     color = 'primary',
+    icon,
     isRounded = false,
     size = 'md',
+    text,
     variant = 'contained',
     ...rest
 }) => {
     const isContained = variant === 'contained';
+    const isOutlined = variant === 'outlined';
+    const isGhost = variant === 'ghost';
+    const hasIcon = !!icon;
+    const hasText = !!text;
+
     const buttonClassNames = classNames(
-        styles[`wallets-button`],
-        (isContained && styles[`wallets-button-color-${color}`]) || '',
+        styles['wallets-button'],
+        isContained && styles[`wallets-button-color-${color}`],
         styles[`wallets-button-size-${size}`],
         styles[`wallets-button-variant-${variant}`],
-        isRounded ? styles[`wallets-button-rounded-full`] : styles[`wallets-button-rounded-default`]
+        isRounded ? styles['wallets-button-rounded-full'] : styles['wallets-button-rounded-default']
     );
 
+    const buttonFontColor = () => {
+        if (isContained) {
+            switch (color) {
+                case 'black':
+                    return 'white';
+                case 'primary-light':
+                    return 'error';
+                case 'primary':
+                    return 'white';
+                case 'white':
+                    return 'general';
+                default:
+                    return 'white';
+            }
+        } else if (isOutlined) {
+            return 'general';
+        } else if (isGhost) {
+            return 'error';
+        }
+    };
+
+    const buttonFontSizeMapper: Record<Extract<TGenericSizes, 'lg' | 'md' | 'sm'>, TGenericSizes> = {
+        lg: 'sm',
+        md: 'sm',
+        sm: 'xs' as const,
+    };
+
     return (
         <button className={buttonClassNames} {...rest}>
-            {children}
+            {hasIcon && icon}
+            {hasText && (
+                <WalletText
+                    align='center'
+                    color={buttonFontColor()}
+                    size={buttonFontSizeMapper[size] || 'sm'}
+                    weight='bold'
+                >
+                    {text}
+                </WalletText>
+            )}
         </button>
     );
 };

packages/wallets/src/components/Base/WalletText/WalletText.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
+import { TGenericSizes } from '../types';
 import styles from './WalletText.module.css';
 
 interface WalletTextProps {
     align?: 'center' | 'left' | 'right';
     children: React.ReactNode;
     color?: 'black' | 'error' | 'general' | 'primary' | 'success' | 'warning' | 'white';
-    size?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+    size?: TGenericSizes;
     weight?: 'bold' | 'normal';
 }
 

packages/wallets/src/components/Base/type.ts

@@ -0,0 +1 @@
+export type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';

packages/wallets/src/components/Base/types.ts

@@ -0,0 +1 @@
+export type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';

packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx

@@ -5,7 +5,7 @@ import IcAppstoreDerivBot from '../../public/images/ic-appstore-deriv-bot.svg';
 import IcAppstoreDerivGo from '../../public/images/ic-appstore-deriv-go.svg';
 import IcAppstoreDerivTrader from '../../public/images/ic-appstore-deriv-trader.svg';
 import IcAppstoreSmartTrader from '../../public/images/ic-appstore-smart-trader.svg';
-import { WalletButton, WalletText } from '../Base';
+import { WalletButton } from '../Base';
 import { TradingAccountCard } from '../TradingAccountCard';
 import './OptionsAndMultipliersListing.scss';
 
@@ -71,13 +71,7 @@ const OptionsAndMultipliersListing = () => {
                         leading={() => (
                             <div className='wallets-options-and-multipliers-listing__content__icon'>{account.icon}</div>
                         )}
-                        trailing={() => (
-                            <WalletButton>
-                                <WalletText align='center' color='white' size='sm' weight='bold'>
-                                    Get
-                                </WalletText>
-                            </WalletButton>
-                        )}
+                        trailing={() => <WalletButton text='Get' />}
                     >
                         <div className='wallets-options-and-multipliers-listing__content__details'>
                             <p className='wallets-options-and-multipliers-listing__content__details-title'>

packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx

@@ -79,23 +79,16 @@ const WalletListCardActions: React.FC<TProps> = ({ isActive, isDemo, loginid })
         <div className='wallets-header__actions'>
             {getWalletHeaderButtons(isDemo).map(button => (
                 <WalletButton
+                    icon={button.icon}
                     isRounded
                     key={button.name}
                     onClick={() => {
                         switchAccount(loginid);
                         history.push(`/wallets/cashier/${button.name}`);
                     }}
+                    text={isActive ? button.text : undefined}
                     variant='outlined'
-                >
-                    {button.icon}
-                    <span
-                        className={`wallets-header__actions-label ${
-                            isActive ? 'wallets-header__actions-label--active' : ''
-                        }`}
-                    >
-                        {button.text}
-                    </span>
-                </WalletButton>
+                />
             ))}
         </div>
     );

packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TradingAccountCard } from '../../../../components';
 import { WalletButton, WalletText } from '../../../../components/Base';
 import CTrader from '../../../../public/images/ctrader.svg';
 import './CTraderList.scss';
 
@@ -24,13 +24,7 @@
                         {...account}
                         key={`ctrader--${account.title}`}
                         leading={() => <div className='wallets-ctrader__content__icon'>{account.icon}</div>}
-                        trailing={() => (
-                            <WalletButton color='primary-light'>
-                                <WalletText align='center' color='error' size='sm' weight='bold'>
-                                    Get
-                                </WalletText>
-                            </WalletButton>
-                        )}
+                        trailing={() => <WalletButton color='primary-light' text='Get' />}
                     >
                         <div className='wallets-ctrader__content__details'>
                             <p className='wallets-ctrader__content__details-title'>{account.title}</p>

packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useMT5AccountsList } from '@deriv/api';
 import { WalletButton, WalletText } from '../../../../../components/Base';
 import { TradingAccountCard } from '../../../../../components/TradingAccountCard';
 import DerivedMT5 from '../../../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../../../public/images/mt5-financial.svg';
@@ -31,16 +31,8 @@
             )}
             trailing={() => (
                 <div className='wallets-added-mt5__actions'>
-                    <WalletButton variant='outlined'>
-                        <WalletText align='center' size='sm' weight='bold'>
-                            Transfer
-                        </WalletText>
-                    </WalletButton>
-                    <WalletButton>
-                        <WalletText align='center' color='white' size='sm' weight='bold'>
-                            Open
-                        </WalletText>
-                    </WalletButton>
+                    <WalletButton text='Transfer' variant='outlined' />
+                    <WalletButton text='Open' />
                 </div>
             )}
         >

packages/wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSortedMT5Accounts } from '@deriv/api';
 import { TradingAccountCard, WalletButton, WalletText } from '../../../../../components';
 import { useModal } from '../../../../../components/ModalProvider';
 import DerivedMT5 from '../../../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../../../public/images/mt5-financial.svg';
@@ -43,11 +43,8 @@
                 <WalletButton
                     color='primary-light'
                     onClick={() => show(<MT5PasswordModal marketType={account?.market_type || 'synthetic'} />)}
-                >
-                    <WalletText align='center' color='error' size='sm' weight='bold'>
-                        Get
-                    </WalletText>
-                </WalletButton>
+                    text='Get'
+                />
             )}
         >
             <div className='wallets-available-mt5__details'>

packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDxtradeAccountsList } from '@deriv/api';
 import { TradingAccountCard } from '../../../../../../components';
 import { WalletButton, WalletText } from '../../../../../../components/Base';
 import DerivX from '../../../../../../public/images/derivx.svg';
 import './AddedDxtradeAccountsList.scss';
 
@@ -17,16 +17,8 @@
             )}
             trailing={() => (
                 <div className='wallets-available-derivx__actions'>
-                    <WalletButton variant='outlined'>
-                        <WalletText align='center' size='sm' weight='bold'>
-                            Transfer
-                        </WalletText>
-                    </WalletButton>
-                    <WalletButton>
-                        <WalletText align='center' color='white' size='sm' weight='bold'>
-                            Open
-                        </WalletText>
-                    </WalletButton>
+                    <WalletButton text='Transfer' variant='outlined' />
+                    <WalletButton text='Open' />
                 </div>
             )}
         >

packages/wallets/src/features/cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx

@@ -17,11 +17,7 @@ const AvailableDxtradeAccountsList: React.FC = () => {
                 </div>
             )}
             trailing={() => (
-                <WalletButton color='primary-light' onClick={() => show(<DxtradeEnterPasswordModal />)}>
-                    <WalletText align='center' color='error' size='sm' weight='bold'>
-                        Get
-                    </WalletText>
-                </WalletButton>
+                <WalletButton color='primary-light' onClick={() => show(<DxtradeEnterPasswordModal />)} text='Get' />
             )}
         >
             <div className='wallets-available-dxtrade__details'>

packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ModalStepWrapper, WalletButton, WalletText } from '../../../../components/Base';
+import { ModalStepWrapper, WalletButton } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import { MT5AccountType } from '../../screens';
 import { JurisdictionModal } from '../JurisdictionModal';
@@ -21,11 +21,8 @@ const MT5AccountTypeModal = () => {
                         });
                         show(<JurisdictionModal />);
                     }}
-                >
-                    <WalletText align='center' color='white' size='sm' weight='bold'>
-                        Get
-                    </WalletText>
-                </WalletButton>
+                    text='Get'
+                />
             )}
             title='Select Deriv MT5’s account type'
         >