From 92a6f2b74f4f6e45f4320a68ac0f87f5dcaa5ce2 Mon Sep 17 00:00:00 2001 From: Diego Munoz Date: Wed, 12 Nov 2025 16:40:20 -0500 Subject: [PATCH 1/4] New: include new summarized star rating version --- .../patterns/starRating/StarRating.md | 11 ++- .../patterns/starRating/StarRating.tsx | 82 +++++++++++++++---- 2 files changed, 75 insertions(+), 18 deletions(-) diff --git a/packages/es-components/src/components/patterns/starRating/StarRating.md b/packages/es-components/src/components/patterns/starRating/StarRating.md index e949e887d..b61cd42e9 100644 --- a/packages/es-components/src/components/patterns/starRating/StarRating.md +++ b/packages/es-components/src/components/patterns/starRating/StarRating.md @@ -1,4 +1,4 @@ -Simple star rating +Simple star rating: ``` @@ -12,6 +12,15 @@ Simple star rating ``` ``` +Poor performer: ``` +``` +Summarized star rating: +``` + +``` +Overwriting summarized star rating with text: +``` + ``` \ No newline at end of file diff --git a/packages/es-components/src/components/patterns/starRating/StarRating.tsx b/packages/es-components/src/components/patterns/starRating/StarRating.tsx index 999862142..08a04526d 100644 --- a/packages/es-components/src/components/patterns/starRating/StarRating.tsx +++ b/packages/es-components/src/components/patterns/starRating/StarRating.tsx @@ -19,9 +19,22 @@ export type StarRatingProps = Override< ratingExplanation?: string; onExplanationOpen?: () => void; noRatingText?: string; + isSummarized?: boolean; + overwriteSummaryText?: string; } >; +const SummaryContainer = styled.div` + display: flex; + align-items: center; + gap: 4px; + + strong { + font-size: 1.1em; + margin-top: -2px; + } +`; + const StarContainer = styled.div<{ isPoorPerformer?: boolean }>` display: flex; width: 133px; @@ -37,7 +50,6 @@ const StarContainer = styled.div<{ isPoorPerformer?: boolean }>` `; const StarRatingLink = styled(LinkButton)` - border-bottom: 1px dashed; color: ${props => props.theme.colors.gray8}; text-decoration: none; @@ -60,6 +72,9 @@ const StarOverlay = styled.div` height: 25px; margin-top: -23px; background-image: url(${ASSETS_PATH}images/star-rating-mask.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; `; const PoorPerformerOverlay = styled.div` @@ -69,6 +84,16 @@ const PoorPerformerOverlay = styled.div` background-size: 100% 100%; `; +const SummarizedOverlay = styled.div` + height: 25px; + width: 25px; + margin-top: -23px; + background-image: url(${ASSETS_PATH}images/summarized-star-rating-mask.svg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; +`; + function getStarRatingBackgroundWidth(rating: number) { const starWidth = 20.2; @@ -104,6 +129,8 @@ const StarRating = React.forwardRef( noRatingText = NOT_AVAILABLE_MESSAGE, onClick: onClickProp, onExplanationOpen, + isSummarized = false, + overwriteSummaryText, ...props }, ref @@ -135,23 +162,38 @@ const StarRating = React.forwardRef( {...props} onClick={onClick} > - {rating === null && {noRatingText}} - {rating !== null && ( - - {!isPoorPerformer ? ( -
- - -
+ {rating === null ? ( + {noRatingText} + ) : ( + <> + {isSummarized ? ( + +
+ + +
+ {overwriteSummaryText || `${rating}/5`} + ) : ( -
- -
+ + {!isPoorPerformer ? ( +
+ + +
+ ) : ( +
+ +
+ )} + )} - + )} ( ); StarRating.propTypes = { + /** The rating to show. This is required */ rating: PropTypes.number.isRequired, + /** Whether to show the poor performer version. It will hide its rating */ isPoorPerformer: PropTypes.bool, onExplanationOpen: PropTypes.func, - noRatingText: PropTypes.string + noRatingText: PropTypes.string, + /** Whether to show the summarized version. */ + isSummarized: PropTypes.bool, + /** Whether to overwrite the summary text. It will hide its rating. It only shows if `isSummarized` is true. */ + overwriteSummaryText: PropTypes.string }; export default StarRating; From 39089fbfd284ff202a041edd6760100d2486b862 Mon Sep 17 00:00:00 2001 From: Diego Munoz Date: Thu, 13 Nov 2025 14:43:33 -0500 Subject: [PATCH 2/4] Update: removed unused background styling in star rating --- .../src/components/patterns/starRating/StarRating.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/es-components/src/components/patterns/starRating/StarRating.tsx b/packages/es-components/src/components/patterns/starRating/StarRating.tsx index 08a04526d..e71846954 100644 --- a/packages/es-components/src/components/patterns/starRating/StarRating.tsx +++ b/packages/es-components/src/components/patterns/starRating/StarRating.tsx @@ -72,9 +72,6 @@ const StarOverlay = styled.div` height: 25px; margin-top: -23px; background-image: url(${ASSETS_PATH}images/star-rating-mask.svg); - background-size: contain; - background-repeat: no-repeat; - background-position: center; `; const PoorPerformerOverlay = styled.div` @@ -89,9 +86,6 @@ const SummarizedOverlay = styled.div` width: 25px; margin-top: -23px; background-image: url(${ASSETS_PATH}images/summarized-star-rating-mask.svg); - background-size: contain; - background-repeat: no-repeat; - background-position: center; `; function getStarRatingBackgroundWidth(rating: number) { From ee1b69029ddea89b3244208205dedea5c0c2875c Mon Sep 17 00:00:00 2001 From: Diego Munoz Date: Thu, 13 Nov 2025 17:12:11 -0500 Subject: [PATCH 3/4] Update: return dotted bottom line on null star rating --- .../src/components/patterns/starRating/StarRating.md | 4 ++++ .../src/components/patterns/starRating/StarRating.tsx | 8 ++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/es-components/src/components/patterns/starRating/StarRating.md b/packages/es-components/src/components/patterns/starRating/StarRating.md index b61cd42e9..8a3dd4a2c 100644 --- a/packages/es-components/src/components/patterns/starRating/StarRating.md +++ b/packages/es-components/src/components/patterns/starRating/StarRating.md @@ -23,4 +23,8 @@ Summarized star rating: Overwriting summarized star rating with text: ``` +``` +No rating available: +``` + ``` \ No newline at end of file diff --git a/packages/es-components/src/components/patterns/starRating/StarRating.tsx b/packages/es-components/src/components/patterns/starRating/StarRating.tsx index e71846954..40655b8b8 100644 --- a/packages/es-components/src/components/patterns/starRating/StarRating.tsx +++ b/packages/es-components/src/components/patterns/starRating/StarRating.tsx @@ -49,7 +49,10 @@ const StarContainer = styled.div<{ isPoorPerformer?: boolean }>` } `; -const StarRatingLink = styled(LinkButton)` +const StarRatingLink = styled(LinkButton)<{ + showBorder?: boolean; +}>` + border-bottom: ${props => (props.showBorder ? '1px dashed' : 'none')}; color: ${props => props.theme.colors.gray8}; text-decoration: none; @@ -153,6 +156,7 @@ const StarRating = React.forwardRef( <> callRefs(el, rootNodeRef, ref)} + showBorder={!isSummarized} {...props} onClick={onClick} > @@ -201,7 +205,7 @@ const StarRating = React.forwardRef( ); StarRating.propTypes = { - /** The rating to show. This is required */ + /** The rating to show. */ rating: PropTypes.number.isRequired, /** Whether to show the poor performer version. It will hide its rating */ isPoorPerformer: PropTypes.bool, From a35b745b924532811f85df6ecf7fa668856bc627 Mon Sep 17 00:00:00 2001 From: Diego Munoz Date: Fri, 14 Nov 2025 15:53:22 -0500 Subject: [PATCH 4/4] Update: update styles of summarized star rating --- .../src/components/patterns/starRating/StarRating.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/es-components/src/components/patterns/starRating/StarRating.tsx b/packages/es-components/src/components/patterns/starRating/StarRating.tsx index 40655b8b8..cd0018f6f 100644 --- a/packages/es-components/src/components/patterns/starRating/StarRating.tsx +++ b/packages/es-components/src/components/patterns/starRating/StarRating.tsx @@ -26,12 +26,15 @@ export type StarRatingProps = Override< const SummaryContainer = styled.div` display: flex; - align-items: center; + align-items: flex-start; + justify-content: flex-start; gap: 4px; strong { font-size: 1.1em; - margin-top: -2px; + margin-top: -1px; + text-align: left; + line-height: 1.2; } `;