add cn overrideable className

coinbase · Aug 14, 2024 · a36945a · a36945a
1 parent 59c9fa6
commit a36945a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx
@@ -145,6 +145,7 @@ type SwapReact = {
 
 ```ts
 type SwapSettingsReact = {
+  className?: string; // Optional className override for top div element.
   icon: ReactNode;
   title: string;
 };

diff --git a/src/swap/components/SwapSettings.tsx b/src/swap/components/SwapSettings.tsx
@@ -1,8 +1,13 @@
 import { isValidElement, useMemo } from 'react';
 import { SwapSettingsSvg } from '../../internal/svg/swapSettings';
+import { cn } from '../../styles/theme';
 import type { SwapSettingsReact } from '../types';
 
-export function SwapSettings({ icon, title = 'Auto' }: SwapSettingsReact) {
+export function SwapSettings({
+  className,
+  icon,
+  title = 'Auto',
+}: SwapSettingsReact) {
   const iconSvg = useMemo(() => {
     if (icon === undefined) {
       return SwapSettingsSvg;
@@ -14,7 +19,7 @@ export function SwapSettings({ icon, title = 'Auto' }: SwapSettingsReact) {
 
   return (
     <div
-      className="flex w-full items-center justify-between"
+      className={cn('flex w-full items-center justify-between', className)}
       data-testid="ockSwapSettings_Settings"
     >
       <div className="flex items-center space-x-1">

diff --git a/src/swap/types.ts b/src/swap/types.ts
@@ -223,6 +223,7 @@ export type SwapReact = {
  * Note: exported as public Type
  */
 export type SwapSettingsReact = {
+  className?: string; // Optional className override for top div element.
   icon: ReactNode;
   title: string;
 };