Merge pull request #5 from deriv-com/shayan/feq-1460/add-classnames-prop

chore: added classname prop to components
deriv-com · Jan 15, 2024 · 701959f · 701959f
2 parents 1e2177e + 0c3fd83
commit 701959f
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 80 deletions.
diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
@@ -21,6 +21,7 @@ interface ButtonProps {
     textSize?: ComponentProps<typeof Text>['size'];
     type?: ComponentProps<'button'>['type'];
     variant?: TVariant;
+    className?: string;
 }
 
 export const Button: FC<PropsWithChildren<ButtonProps>> = ({
@@ -37,6 +38,7 @@ export const Button: FC<PropsWithChildren<ButtonProps>> = ({
     textSize,
     type,
     variant = 'contained',
+    className
 }) => {
     const isContained = variant === 'contained';
 
@@ -46,7 +48,8 @@ export const Button: FC<PropsWithChildren<ButtonProps>> = ({
         `wallets-button__variant--${variant}`,
         `wallets-button__rounded--${rounded}`,
         isContained && `wallets-button__color--${color}`,
-        isFullWidth && 'wallets-button__full-width'
+        isFullWidth && 'wallets-button__full-width',
+        className
     );
 
     type TButtonFontColor = {

diff --git a/lib/components/Loader/index.tsx b/lib/components/Loader/index.tsx
@@ -5,11 +5,12 @@ import './Loader.scss';
 type TProps = {
     color?: React.CSSProperties['color'];
     isFullScreen?: boolean;
+    className?: string;
 };
 
-export const Loader: React.FC<TProps> = ({ color = '#85ACB0', isFullScreen = true }) => (
+export const Loader: React.FC<TProps> = ({ color = '#85ACB0', isFullScreen = true, className }) => (
     <div
-        className={classNames('wallets-loader', { 'wallets-loader--fullscreen': isFullScreen })}
+        className={classNames('wallets-loader', { 'wallets-loader--fullscreen': isFullScreen }, className)}
         data-testid='dt_wallets-loader'
     >
         <span className='wallets-loader__element' role='span' style={{ backgroundColor: color }} />

diff --git a/lib/components/Text/index.tsx b/lib/components/Text/index.tsx
@@ -14,6 +14,7 @@ export interface TextProps {
     lineHeight?: TGenericSizes;
     size?: Exclude<TGenericSizes, '3xs' | '6xl' | '7xl'>;
     weight?: CSSProperties['fontWeight'];
+    className?: string;
 }
 
 export const Text: React.FC<TextProps> = ({
@@ -25,6 +26,7 @@ export const Text: React.FC<TextProps> = ({
     lineHeight,
     size = 'md',
     weight = 'normal',
+    className
 }) => {
     const textClassNames = classNames(
         'wallet-text',
@@ -33,7 +35,8 @@ export const Text: React.FC<TextProps> = ({
         `wallets-text__align--${align}`,
         `wallets-text__color--${color}`,
         `wallets-text__line-height--${lineHeight}`,
-        `wallets-text__font-style--${fontStyle}`
+        `wallets-text__font-style--${fontStyle}`,
+        className
     );
 
     const Tag = as;

diff --git a/package-lock.json b/package-lock.json
diff --git a/vite.config.ts b/vite.config.ts
@@ -32,7 +32,7 @@ export default defineConfig({
     },
     copyPublicDir: false,
     rollupOptions: {
-      external: ['react', 'react/jsx-runtime'],
+      external: ['react', 'react/jsx-runtime', 'classnames'],
       input: Object.fromEntries(
         glob.sync('lib/**/*.{ts,tsx}').map(file => {
           return [