chore: rename brand prop to subtitle in Product Card (#1188)

bigcommerce · Jul 30, 2024 · 5c77f41 · 5c77f41
1 parent 78949fe
commit 5c77f41
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/many-ravens-switch.md b/.changeset/many-ravens-switch.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Rename brand prop to subtitle in Product Card.
diff --git a/core/components/product-card/index.tsx b/core/components/product-card/index.tsx
@@ -51,14 +51,14 @@ export const ProductCard = ({
   return (
     <ComponentProductCard
       addToCart={showCart && <AddToCart data={product} />}
-      brand={brand?.name}
       image={defaultImage}
       imagePriority={imagePriority}
       imageSize={imageSize}
       link={path}
       price={<Pricing data={product} />}
       productId={entityId}
       showCompare={showCompare}
+      subtitle={brand?.name}
       title={name}
     />
   );

diff --git a/core/components/ui/product-card/product-card.tsx b/core/components/ui/product-card/product-card.tsx
@@ -8,20 +8,19 @@ import { Compare } from './compare';
 
 interface Props extends ComponentPropsWithRef<'div'> {
   addToCart?: ReactNode;
-  brand?: string;
   image?: { url: string; altText: string } | null;
   imagePriority?: boolean;
   imageSize?: 'square' | 'tall' | 'wide';
   link: string;
   price?: ReactNode;
   productId: number;
   showCompare?: boolean;
+  subtitle?: string;
   title: string;
 }
 
 const ProductCard = ({
   addToCart,
-  brand,
   className,
   image,
   imagePriority = false,
@@ -30,6 +29,7 @@ const ProductCard = ({
   price,
   productId,
   showCompare = true,
+  subtitle,
   title,
   ...props
 }: Props) => {
@@ -58,7 +58,7 @@ const ProductCard = ({
         </div>
       </div>
       <div className={cn('flex flex-1 flex-col gap-1', Boolean(addToCart) && 'justify-end')}>
-        {brand ? <p className="text-base text-gray-500">{brand}</p> : null}
+        {subtitle ? <p className="text-base text-gray-500">{subtitle}</p> : null}
         <h3 className="text-xl font-bold lg:text-2xl">
           <Link
             className="focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-primary/20 focus-visible:ring-0"