diff --git a/README.md b/README.md
index 2d477b0b3..cec3e750c 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
[](https://badge.fury.io/js/es-components)
[](https://github.com/WTW-IM/es-components/actions/workflows/ci.yml)
-[](https://david-dm.org/wtw-im/es-components?path=packages%2Fes-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