Product rating: improve preview style when the product doesn't have rating (https://github.com/woocommerce/woocommerce-blocks/pull/9684)

* product rating: improve preview style when no rating is visible

* fix class naming

* fix cutted star

* change variable

* fix cut border
This commit is contained in:
Luigi Teschio 2023-06-05 17:27:55 +02:00 committed by Tarun Vijwani
parent 5f60dbbd6c
commit 460b8a5034
2 changed files with 58 additions and 8 deletions

View File

@ -40,12 +40,35 @@ const getRatingCount = ( product: ProductResponseItem ) => {
return Number.isFinite( count ) && count > 0 ? count : 0; return Number.isFinite( count ) && count > 0 ? count : 0;
}; };
const getStarStyle = ( rating: number ) => ( {
width: ( rating / 5 ) * 100 + '%',
} );
const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
const starStyle = getStarStyle( 0 );
return (
<div
className={ classnames(
'wc-block-components-product-rating__norating-container',
`${ parentClassName }-product-rating__norating-container`
) }
>
<div
className={ 'wc-block-components-product-rating__norating' }
role="img"
>
<span style={ starStyle } />
</div>
<span>{ __( 'No Reviews', 'woo-gutenberg-products-block' ) }</span>
</div>
);
};
const Rating = ( props: RatingProps ): JSX.Element => { const Rating = ( props: RatingProps ): JSX.Element => {
const { rating, reviews, parentClassName } = props; const { rating, reviews, parentClassName } = props;
const starStyle = { const starStyle = getStarStyle( rating );
width: ( rating / 5 ) * 100 + '%',
};
const ratingText = sprintf( const ratingText = sprintf(
/* translators: %f is referring to the average rating value */ /* translators: %f is referring to the average rating value */
@ -132,11 +155,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
} }
); );
const mockedRatings = shouldDisplayMockedReviewsWhenProductHasNoReviews ? ( const mockedRatings = shouldDisplayMockedReviewsWhenProductHasNoReviews ? (
<Rating <NoRating parentClassName={ parentClassName } />
rating={ 0 }
reviews={ 0 }
parentClassName={ parentClassName }
/>
) : null; ) : null;
const content = reviews ? ( const content = reviews ? (

View File

@ -56,6 +56,37 @@
margin-top: 0; margin-top: 0;
margin-bottom: $gap-small; margin-bottom: $gap-small;
} }
&__norating-container {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: $gap-smaller;
}
&__norating {
display: inline-block;
overflow: hidden;
position: relative;
width: 1.5em;
height: 1.618em;
line-height: 1.618;
font-size: 1em;
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: star;
font-weight: 400;
-webkit-text-stroke: 2px var(--wp--preset--color--black, #000);
&::before {
content: "\53";
top: 0;
left: 0;
right: 0;
position: absolute;
color: transparent;
white-space: nowrap;
text-align: center;
}
}
} }
.wp-block-woocommerce-single-product { .wp-block-woocommerce-single-product {