diff --git a/README.md b/README.md index 2d477b0b3..cec3e750c 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![npm version](https://badge.fury.io/js/es-components.svg)](https://badge.fury.io/js/es-components) [![Build Status](https://github.com/WTW-IM/es-components/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/WTW-IM/es-components/actions/workflows/ci.yml) -[![dependency status](https://david-dm.org/wtw-im/es-components.svg?path=packages%2Fes-components)](https://david-dm.org/wtw-im/es-components?path=packages%2Fes-components) +[![dependency status](https://img.shields.io/librariesio/github/WTW-IM/es-components)](https://libraries.io/github/WTW-IM/es-components) # es-components-via-theme diff --git a/packages/es-components/src/components/patterns/starRating/StarRating.md b/packages/es-components/src/components/patterns/starRating/StarRating.md index e949e887d..8a3dd4a2c 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,19 @@ Simple star rating ``` ``` +Poor performer: ``` +``` +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 999862142..1b16b87cd 100644 --- a/packages/es-components/src/components/patterns/starRating/StarRating.tsx +++ b/packages/es-components/src/components/patterns/starRating/StarRating.tsx @@ -19,9 +19,25 @@ export type StarRatingProps = Override< ratingExplanation?: string; onExplanationOpen?: () => void; noRatingText?: string; + isSummarized?: boolean; + overwriteSummaryText?: string; } >; +const SummaryContainer = styled.div` + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: 4px; + + strong { + font-size: 1.1em; + margin-top: -1px; + text-align: left; + line-height: 1.2; + } +`; + const StarContainer = styled.div<{ isPoorPerformer?: boolean }>` display: flex; width: 133px; @@ -36,8 +52,10 @@ const StarContainer = styled.div<{ isPoorPerformer?: boolean }>` } `; -const StarRatingLink = styled(LinkButton)` - border-bottom: 1px dashed; +const StarRatingLink = styled(LinkButton)<{ + showBorder?: boolean; +}>` + border-bottom: ${props => (props.showBorder ? '1px dashed' : 'none')}; color: ${props => props.theme.colors.gray8}; text-decoration: none; @@ -69,6 +87,13 @@ 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); +`; + 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 @@ -132,26 +159,42 @@ const StarRating = React.forwardRef( <> callRefs(el, rootNodeRef, ref)} + showBorder={!isSummarized} {...props} onClick={onClick} > - {rating === null && {noRatingText}} - {rating !== null && ( - - {!isPoorPerformer ? ( -
- - -
+ {rating === null ? ( + {noRatingText} + ) : ( + <> + {isSummarized ? ( + +
+ + +
+ {overwriteSummaryText || `${rating}/5`} +
) : ( -
- -
+ + {!isPoorPerformer ? ( +
+ + +
+ ) : ( +
+ +
+ )} +
)} -
+ )}
( ); StarRating.propTypes = { + /** The rating to show. */ 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; +export default StarRating; \ No newline at end of file