Add default value to "elementsClassNames" prop

codux-demos · Feb 7, 2024 · d23c5f4 · d23c5f4
1 parent 6a2f4a0
commit d23c5f4
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 22 deletions.
diff --git a/src/components/base-card/base-card.tsx b/src/components/base-card/base-card.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import styles from './base-card.module.scss';
 import { ReactNode } from 'react';
 
-
 export interface BaseCardElementsClassNames {
     image?: string;
     content?: string;
@@ -19,17 +18,15 @@ export const BaseCard = ({
     className,
     imageSrc = 'https://static.wixstatic.com/media/f09b13_6ec13d6fe0cc4ecb8834fe856605b9f6~mv2.jpg',
     children = 'Card content',
-    elementsClassNames,
+    elementsClassNames = {},
 }: BaseCardProps) => {
     return (
         <div className={classNames(styles.root, className)}>
             <div
-                className={classNames(styles.image, elementsClassNames?.image)}
+                className={classNames(styles.image, elementsClassNames.image)}
                 style={{ backgroundImage: `url(${imageSrc})` }}
             />
-            <div className={classNames(styles.content, elementsClassNames?.content)}>
-                {children}
-            </div>
+            <div className={classNames(styles.content, elementsClassNames.content)}>{children}</div>
         </div>
     );
 };
diff --git a/src/components/business-card/business-card.tsx b/src/components/business-card/business-card.tsx
@@ -14,7 +14,7 @@ export interface BusinessCardProps extends Omit<BaseCardProps, 'children'> {
 
 export const BusinessCard = ({
     className,
-    elementsClassNames,
+    elementsClassNames = {},
     title = 'Buiness name',
     description,
     ...props
@@ -25,7 +25,7 @@ export const BusinessCard = ({
             elementsClassNames={{ content: styles.baseCardContent, image: styles.baseCardImage }}
             {...props}
         >
-            <div className={classNames(styles.content, elementsClassNames?.content)}>
+            <div className={classNames(styles.content, elementsClassNames.content)}>
                 <div className={styles.restaurantDetailsContainer}>
                     <h3 className={styles.title}>{title}</h3>
                     <span className={styles.description}>{description}</span>
@@ -35,7 +35,7 @@ export const BusinessCard = ({
                     <span className={styles.units}>min</span>
                 </div>
             </div>
-            <footer className={classNames(styles.footer, elementsClassNames?.footer)}>
+            <footer className={classNames(styles.footer, elementsClassNames.footer)}>
                 <span className={styles.deliveryPrice}>
                     <span>$</span>16.00
                 </span>

diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
@@ -24,7 +24,7 @@ export interface DialogProps extends DialogOptions {
 
 export const Dialog = ({
     className,
-    elementsClassNames,
+    elementsClassNames = {},
     dismissible = false,
     children,
     ...props
@@ -35,7 +35,7 @@ export const Dialog = ({
                 className={classNames(styles.root, className)}
                 backdrop={
                     <div
-                        className={classNames(styles.backdrop, elementsClassNames?.backdrop)}
+                        className={classNames(styles.backdrop, elementsClassNames.backdrop)}
                         hidden={!open}
                     />
                 }
@@ -44,9 +44,8 @@ export const Dialog = ({
                 {children}
                 {dismissible && (
                     <AriakitDialogDismiss
-                        render={<IconButton className={styles.dismissButton} icon="close"/> }   
-                    >
-                    </AriakitDialogDismiss>
+                        render={<IconButton className={styles.dismissButton} icon="close" />}
+                    ></AriakitDialogDismiss>
                 )}
             </AriakitDialog>
         </AriakitDialogProvider>

diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx
@@ -11,14 +11,14 @@ export interface SearchProps extends InputProps {
     elementsClassNames?: SearchElementsClassNames;
 }
 
-export const Search = ({ className, elementsClassNames, ...props }: SearchProps) => {
+export const Search = ({ className, elementsClassNames = {}, ...props }: SearchProps) => {
     return (
         <div className={classNames(styles.root, className)}>
             <Icon
-                className={classNames(styles.searchIcon, elementsClassNames?.icon)}
+                className={classNames(styles.searchIcon, elementsClassNames.icon)}
                 icon="search"
             />
-            <Input className={classNames(styles.field, elementsClassNames?.field)} {...props} />
+            <Input className={classNames(styles.field, elementsClassNames.field)} {...props} />
         </div>
     );
 };
diff --git a/src/components/teaser-card/teaser-card.tsx b/src/components/teaser-card/teaser-card.tsx
@@ -19,7 +19,7 @@ export interface TeaserCardProps extends Omit<BaseCardProps, 'children'> {
 
 export const TeaserCard = ({
     className,
-    elementsClassNames,
+    elementsClassNames = {},
     title = 'Card title',
     description,
     ...props
@@ -28,13 +28,17 @@ export const TeaserCard = ({
         <BaseCard
             className={classNames(styles.root, className)}
             elementsClassNames={{
-                image: classNames(styles.image, elementsClassNames?.image),
-                content: classNames(styles.content, elementsClassNames?.content),
+                image: classNames(styles.image, elementsClassNames.image),
+                content: classNames(styles.content, elementsClassNames.content),
             }}
             {...props}
         >
-            <h3 className={classNames(styles.title, elementsClassNames?.title)}>{title}</h3>
-            {description !== undefined && <span className={classNames(styles.description, elementsClassNames?.description)}>{description}</span>}
+            <h3 className={classNames(styles.title, elementsClassNames.title)}>{title}</h3>
+            {description !== undefined && (
+                <span className={classNames(styles.description, elementsClassNames.description)}>
+                    {description}
+                </span>
+            )}
         </BaseCard>
     );
 };