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}
);