aizad/feat: base components - button (deriv-com#10700)

* chore: Updated button component to include Wallet Text and Icon * fix: resolve comments * fix: resolve comments * fix: added fullwidth * fix: remove WalletText * fix: remove WalletText in AvailableMT5AccountList
heorhi-deriv · Oct 17, 2023 · 322162f · 322162f
1 parent 2ac6589
commit 322162f
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 76 deletions.
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css b/packages/wallets/src/components/Base/WalletButton/WalletButton.module.css
@@ -72,4 +72,7 @@
             background: var(--system-dark-5-active-background, #323738);
         }
     }
+    &-full-width {
+        width: 100%;
+    }
 }
diff --git a/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx b/packages/wallets/src/components/Base/WalletButton/WalletButton.tsx
@@ -1,35 +1,84 @@
-import React, { ComponentProps, CSSProperties } from 'react';
+import React, { ButtonHTMLAttributes, ReactElement } 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?: ReactElement;
+    isFullWidth?: boolean;
     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,
+    isFullWidth = false,
     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'],
+        isFullWidth && styles['wallets-button-full-width']
     );
 
+    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>
     );
 };

diff --git a/packages/wallets/src/components/Base/WalletText/WalletText.tsx b/packages/wallets/src/components/Base/WalletText/WalletText.tsx
@@ -1,13 +1,14 @@
 import React, { ComponentProps, CSSProperties, ReactNode } from 'react';
 import classNames from 'classnames';
+import { TGenericSizes } from '../types';
 import styles from './WalletText.module.css';
 
 interface WalletTextProps extends ComponentProps<'span'> {
     align?: CSSProperties['textAlign'];
     children: ReactNode;
     color?: CSSProperties['color'] | 'error' | 'general' | 'primary' | 'success' | 'warning';
     lineHeight?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | '5xl' | '6xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-    size?: '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+    size?: TGenericSizes;
     weight?: CSSProperties['fontWeight'];
 }
 

diff --git a/packages/wallets/src/components/Base/type.ts b/packages/wallets/src/components/Base/type.ts
@@ -0,0 +1 @@
+export type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
diff --git a/packages/wallets/src/components/Base/types.ts b/packages/wallets/src/components/Base/types.ts
@@ -0,0 +1 @@
+export type TGenericSizes = '2xl' | '2xs' | '3xl' | '3xs' | '4xl' | '4xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
diff --git a/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx b/...ages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx
@@ -69,13 +69,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'>
                             <WalletText size='sm' weight='bold'>

diff --git a/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx b/packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx
@@ -81,23 +81,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>
     );

diff --git a/packages/wallets/src/features/cfd/components/CTraderList/CTraderList.tsx b/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 { WalletButton } from '../../../../components/Base';
 import CTrader from '../../../../public/images/ctrader.svg';
 import './CTraderList.scss';
 
@@ -24,13 +24,7 @@ const CTraderList: React.FC = () => {
                         {...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>

diff --git a/packages/wallets/src/features/cfd/flows/MT5/AddedMT5AccountsList/AddedMT5AccountsList.tsx b/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 { WalletButton } 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 @@ const AddedMT5AccountsList: React.FC<TProps> = ({ account }) => {
             )}
             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>
             )}
         >

diff --git a/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/.../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 { TradingAccountCard, WalletButton } 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 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
                 <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'>

diff --git a/...eatures/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/...eatures/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 { WalletButton } from '../../../../../../components/Base';
 import DerivX from '../../../../../../public/images/derivx.svg';
 import './AddedDxtradeAccountsList.scss';
 
@@ -17,16 +17,8 @@ const AddedDxtradeAccountsList: React.FC = () => {
             )}
             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>
             )}
         >

diff --git a/...cfd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.tsx b/...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'>

diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountTypeModal/MT5AccountTypeModal.tsx b/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'
         >
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type TGenericSizes = '2xl' \| '2xs' \| '3xl' \| '3xs' \| '4xl' \| '4xs' \| 'lg' \| 'md' \| 'sm' \| 'xl' \| 'xs';