diff --git a/README.md b/README.md index 2389e2a..6d2f414 100644 --- a/README.md +++ b/README.md @@ -176,13 +176,13 @@ Props that can be passed to the component are listed below: ratingAverageIconProps?: object - An object defining the fill color ( fillColor?: string ) and background color ( bgColor?: string ) for customizing the appearance of star icon in the average rating section. + An object defining the fill color ( fillColor?: string ), background color ( bgColor?: string ), border color (borderColor: string) and border width (borderWidth: number) for customizing the appearance of star icon in the average rating section. undefined thousandsSeparator?: string A string specifying the custom thousands separator for formatting a numerical value. - ',' + undefined ratingAverageSubText?: string @@ -194,6 +194,11 @@ Props that can be passed to the component are listed below: The order prop dictates the summary section's display order. Possible values are: 'ORIGINAL' or 'REVERSE'. For numeric ratingIds, it sorts in ascending (ORIGINAL) or descending (REVERSE) order. For string based ratingIds, it reflects the original/reversed order of keys in the ratings prop. 'REVERSE' + + ratingLabelIconProps?: object + An object defining the fill color ( fillColor?: string ), background color ( bgColor?: string ), border color (borderColor: string) and border width (borderWidth: number) for customizing the appearance of star icon in the progess bar label section. + undefined + diff --git a/src/assets/rating-summary-example.png b/src/assets/rating-summary-example.png index 9cf9b33..d6fc69f 100644 Binary files a/src/assets/rating-summary-example.png and b/src/assets/rating-summary-example.png differ diff --git a/src/assets/star-grey.svg b/src/assets/star-grey.svg deleted file mode 100644 index 4349327..0000000 --- a/src/assets/star-grey.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/src/constants.ts b/src/constants.ts index 9ada972..2b575b2 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -27,17 +27,11 @@ export enum ORDER { export const INTERNATIONAL_NUMBER_SYSTEM_REGEX = /\B(?=(\d{3})+(?!\d))/g; -export const DEFAULT_BAR_COLORS = { - 1: '#ff8b5a', - 2: '#ffb337', - 3: '#ffd834', - 4: '#add633', - 5: '#9fc05a' -}; +export const DEFAULT_COLOR = "#5D5FEF"; export const RATING_AVERAGE_DEFAULTS = { icon: { - fillColor: '#919191', - bgColor: '#F2F2F2' + fillColor: DEFAULT_COLOR, + bgColor: '#FFFFFF' } }; diff --git a/src/rating-average/RatingAverage.tsx b/src/rating-average/RatingAverage.tsx index 707ef96..39bbc29 100644 --- a/src/rating-average/RatingAverage.tsx +++ b/src/rating-average/RatingAverage.tsx @@ -24,7 +24,7 @@ const RatingAverage: FC = (props) => { thousandsSeparator, ratingAverageSubText } = props; - const { fillColor = icon.fillColor, bgColor = icon.bgColor } = + const { fillColor = icon.fillColor, bgColor = icon.bgColor, borderColor, borderWidth } = iconProps || {}; const extractStarInfo = (average: number): [number, number, number] => { @@ -65,6 +65,8 @@ const RatingAverage: FC = (props) => { @@ -79,6 +81,8 @@ const RatingAverage: FC = (props) => { @@ -95,6 +99,8 @@ const RatingAverage: FC = (props) => { diff --git a/src/rating-average/star/Star.tsx b/src/rating-average/star/Star.tsx index ea8a369..3547334 100644 --- a/src/rating-average/star/Star.tsx +++ b/src/rating-average/star/Star.tsx @@ -3,10 +3,11 @@ import React, { FC } from 'react'; import { StarProp } from './types'; const Star: FC = (props) => { - const { fillColor, bgColor, colorFilledFraction, id } = props; + const { fillColor, bgColor, colorFilledFraction, borderColor, borderWidth = 2, id } = props; + const borderFallBackColor = borderColor || fillColor; return ( - + @@ -14,6 +15,8 @@ const Star: FC = (props) => { = (props) => { @@ -24,13 +24,11 @@ const RatingDistributionItem: FC = (props) => { const getBarBgColor = (): string => { if (barColors?.[currentRatingId]) return barColors[currentRatingId]; - return isValidNumber(currentRatingId) && - DEFAULT_BAR_COLORS[Number(currentRatingId)] - ? DEFAULT_BAR_COLORS[Number(currentRatingId)] - : DEFAULT_BAR_COLORS[1]; + return DEFAULT_COLOR; }; return ( + <>
= (props) => { showAnimation && classes.animations }`} > - {showCount && ( +
+ + + {showCount && ( = (props) => { {formatNumber(currentRatingValue, thousandsSeparator)} )} - - - + ); }; diff --git a/src/rating-distribution-item/styles.module.scss b/src/rating-distribution-item/styles.module.scss index e9a741f..4553cfb 100644 --- a/src/rating-distribution-item/styles.module.scss +++ b/src/rating-distribution-item/styles.module.scss @@ -7,6 +7,9 @@ } } .barContainer { + background-color: #F2F2F2; + height: 16px; + border-radius: 4px; width: 100%; display: table-cell; } @@ -14,18 +17,21 @@ max-width: 100%; } .filledBar { - height: 24px; + height: 16px; + border-radius: 4px; overflow-x: visible; display: flex; align-items: center; width: 100%; } + .countContainer { - font-size: 11px; + display: table-cell; + text-align: end; + padding-left: 5px; + vertical-align: middle; + font-size: 10px; line-height: 17px; - background-color: transparent; - color: #282b0b; - padding-left: 8px; } .transitions { transition: width 0.3s ease-in-out; diff --git a/src/rating-label/RatingLabel.tsx b/src/rating-label/RatingLabel.tsx index 90bec09..3737a88 100644 --- a/src/rating-label/RatingLabel.tsx +++ b/src/rating-label/RatingLabel.tsx @@ -1,13 +1,18 @@ import React, { FC } from 'react'; import { IRatingLabelProp } from './types'; -import starImg from '../assets/star-grey.svg'; import { getStyles } from '../utils'; -import { Elements } from '../constants'; +import { + Elements, + RATING_AVERAGE_DEFAULTS +} from '../constants'; import classes from './styles.module.scss'; +import Star from '../rating-average/star'; const RatingLabel: FC = (props) => { - const { ratingId, styles } = props; + const { ratingId, styles, iconProps } = props; + const { icon } = RATING_AVERAGE_DEFAULTS; + const { fillColor = icon.fillColor } = iconProps || {}; return (
= (props) => { id={`${ratingId}-label`} style={getStyles(styles, Elements.Label, ratingId)} > - + > + +
{ratingId} ); diff --git a/src/rating-label/styles.module.scss b/src/rating-label/styles.module.scss index ac556f6..d8bcf3a 100644 --- a/src/rating-label/styles.module.scss +++ b/src/rating-label/styles.module.scss @@ -3,13 +3,14 @@ padding-right: 8px; white-space: nowrap; vertical-align: middle; - font-size: 15px; - color: #919191; + font-size: 12px; + font-weight: 500; } .starImage { + display: inline-block; vertical-align: middle; margin-right: 4px; - width: 14px; - height: 14px; + width: 13px; + height: 13px; } diff --git a/src/rating-label/types.d.ts b/src/rating-label/types.d.ts index e323720..55ca09e 100644 --- a/src/rating-label/types.d.ts +++ b/src/rating-label/types.d.ts @@ -1,6 +1,7 @@ -import { CustomStyles } from '../rating-summary/types'; +import { CustomStyles, RatingIconProps } from '../rating-summary/types'; export type IRatingLabelProp = { ratingId: string; styles: CustomStyles; + iconProps: RatingIconProps }; diff --git a/src/rating-summary/RatingSummary.tsx b/src/rating-summary/RatingSummary.tsx index 17b467e..d964279 100644 --- a/src/rating-summary/RatingSummary.tsx +++ b/src/rating-summary/RatingSummary.tsx @@ -22,6 +22,7 @@ const RatingSummary: FC = (props) => { customAverageFn, averageRatingPrecision = 1, ratingAverageIconProps = {}, + ratingLabelIconProps = {}, thousandsSeparator, ratingAverageSubText = 'reviews', order = ORDER.REVERSE @@ -71,7 +72,7 @@ const RatingSummary: FC = (props) => { style={getStyles(styles, Elements.SummaryItemContainer, ratingId)} > {(renderLabel && <>{renderLabel(ratingId)}) || ( - + )} number; @@ -45,7 +47,8 @@ export type ISummaryProp = { showAverageRating?: boolean; customAverageFn?: CustomAverageFn; averageRatingPrecision?: number; - ratingAverageIconProps?: RatingAverageIconProps; + ratingAverageIconProps?: RatingIconProps; + ratingLabelIconProps?: RatingIconProps; thousandsSeparator?: string; ratingAverageSubText?: string; order?: ORDER; diff --git a/src/stories/RatingSummary.stories.tsx b/src/stories/RatingSummary.stories.tsx index 59f2599..147499c 100644 --- a/src/stories/RatingSummary.stories.tsx +++ b/src/stories/RatingSummary.stories.tsx @@ -23,11 +23,6 @@ export default { defaultValue: true, control: { type: 'boolean' } }, - thousandsSeparator: { - defaultValue: ',', - options: [',', '.'], - control: { type: 'select' } - }, averageRatingPrecision: { defaultValue: 1, control: { type: 'number' } @@ -45,8 +40,8 @@ export default { control: { type: 'color' } }, defaultValue: { - fillColor: '#919191', - bgColor: '#F2F2F2' + fillColor: '#5D5FEF', + bgColor: '#FFFFFF' } }, order: { @@ -99,6 +94,12 @@ DefaultFixedWidthContainer.args = { } }; +export const VariantWithThousandsSeparator = Template.bind({}); +VariantWithThousandsSeparator.args = { + ...Default.args, + thousandsSeparator: "," +}; + export const VariantWithCustomBarColors = Template.bind({}); VariantWithCustomBarColors.args = { ...Default.args, diff --git a/src/utils.ts b/src/utils.ts index c613d8a..0e3f092 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,9 +1,27 @@ import { INTERNATIONAL_NUMBER_SYSTEM_REGEX, Elements } from './constants'; import { CustomStyles, IRatings, RatingRanks } from './rating-summary/types'; -export const formatNumber = (num: number, thousandsSeparator = ','): string => +export const formatThousandNumber = (num: number, thousandsSeparator = ','): string => num.toString().replace(INTERNATIONAL_NUMBER_SYSTEM_REGEX, thousandsSeparator); +export const formatLargeNumber = (num: number) : string =>{ + const abbrev = ["K", "M", "B", "T"]; + let round = 0; + while (Math.abs(num) >= 999) { + round++; + num /= 1000; + } + return num.toFixed(1) + abbrev[round - 1]; +} + +export const formatNumber = (num: number, thousandsSeparator = ''): string | number => { + if (Math.abs(num) < 999) { + return num; + } + else if(thousandsSeparator) return formatThousandNumber(num, thousandsSeparator); + return formatLargeNumber(num); +} + export const getStyles = ( allStyles: CustomStyles, element: Elements, @@ -33,6 +51,3 @@ export const getWeightedAverage = ( const sumOfNumbers = getTotalRatingCount(data); return sumOfNumbers ? weightedSum / sumOfNumbers : 0; }; - -export const isValidNumber = (value: string): boolean => - !isNaN(parseFloat(value));