diff --git a/.changeset/plenty-news-smoke.md b/.changeset/plenty-news-smoke.md new file mode 100644 index 0000000000..4f8621f4b9 --- /dev/null +++ b/.changeset/plenty-news-smoke.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": patch +--- + +Rename `value` to `rating` for Rating component, remove unused props. diff --git a/core/app/[locale]/(default)/(faceted)/_components/facets.tsx b/core/app/[locale]/(default)/(faceted)/_components/facets.tsx index c64fd0465f..74284cdfb6 100644 --- a/core/app/[locale]/(default)/(faceted)/_components/facets.tsx +++ b/core/app/[locale]/(default)/(faceted)/_components/facets.tsx @@ -213,7 +213,7 @@ export const Facets = ({ facets, pageType }: Props) => { 'text-primary': rating.isSelected, })} > - + {t('rating', { currentRating: rating.value })} diff --git a/core/app/[locale]/(default)/compare/page.tsx b/core/app/[locale]/(default)/compare/page.tsx index bd12d9296d..21bc6d7d37 100644 --- a/core/app/[locale]/(default)/compare/page.tsx +++ b/core/app/[locale]/(default)/compare/page.tsx @@ -267,7 +267,7 @@ export default async function Compare({ ? `${product.name} has no rating specified` : `${product.name} rating is ${product.reviewSummary.averageRating} out of 5 stars` } - value={product.reviewSummary.averageRating} + rating={product.reviewSummary.averageRating} />

diff --git a/core/app/[locale]/(default)/product/[slug]/_components/review-summary.tsx b/core/app/[locale]/(default)/product/[slug]/_components/review-summary.tsx index 1f150ff5f2..c9f4c57121 100644 --- a/core/app/[locale]/(default)/product/[slug]/_components/review-summary.tsx +++ b/core/app/[locale]/(default)/product/[slug]/_components/review-summary.tsx @@ -34,7 +34,7 @@ export const ReviewSummary = async ({ data }: Props) => { aria-describedby={summaryId} className={cn('flex flex-nowrap text-primary', hasNoReviews && 'text-gray-400')} > - +

diff --git a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx index ff2e2211ad..9c90d3580a 100644 --- a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx +++ b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx @@ -81,7 +81,7 @@ export const Reviews = async ({ productId }: Props) => { return (
  • - + {t('reviewRating', { rating: review.rating })}

    {review.title}

    diff --git a/core/components/product-sheet/product-sheet-content.tsx b/core/components/product-sheet/product-sheet-content.tsx index 3d24d346a3..156411cdea 100644 --- a/core/components/product-sheet/product-sheet-content.tsx +++ b/core/components/product-sheet/product-sheet-content.tsx @@ -118,7 +118,7 @@ export const ProductSheetContent = () => { product.reviewSummary.numberOfReviews === 0 && 'text-gray-400', )} > - +

    diff --git a/core/components/ui/rating/rating.tsx b/core/components/ui/rating/rating.tsx index a639b1bc9c..cad12bca5e 100644 --- a/core/components/ui/rating/rating.tsx +++ b/core/components/ui/rating/rating.tsx @@ -1,5 +1,4 @@ -import { LucideIcon } from 'lucide-react'; -import { ComponentPropsWithoutRef, FC, ReactElement } from 'react'; +import { ComponentPropsWithoutRef, ReactElement } from 'react'; import { cn } from '~/lib/utils'; @@ -12,45 +11,27 @@ const roundHalf = (num: number) => { return Math.round(num * 2) / 2; }; -type StarIconType = FC> | LucideIcon; - interface Props extends ComponentPropsWithoutRef<'span'> { + rating: number; size?: number; - starEmptyIcon?: StarIconType; - starFilledIcon?: StarIconType; - starHalfIcon?: StarIconType; - strokeColor?: string; - value: number; } -const Rating = ({ - className, - size = 24, - starEmptyIcon, - starFilledIcon, - starHalfIcon, - value, - ...props -}: Props) => { +const Rating = ({ className, rating, size = 24 }: Props) => { const stars: ReactElement[] = []; - const rating = roundHalf(value); - - const StarHalf = starHalfIcon || StarHalfIcon; - const StarEmpty = starEmptyIcon || StarEmptyIcon; - const StarFilled = starFilledIcon || StarFilledIcon; + const roundedRating = roundHalf(rating); for (let i = 1; i <= MAX_RATING; i += 1) { - if (rating - i >= 0) { - stars.push(); - } else if (rating - i > -1) { - stars.push(); + if (roundedRating - i >= 0) { + stars.push(); + } else if (roundedRating - i > -1) { + stars.push(); } else { - stars.push(); + stars.push(); } } return ( - + {stars} );