Merge pull request #19 from KeyValueSoftwareSystems/feature/design-ch…

…anges

style: new design updates, default color change, barcount format change

README.md

@@ -176,13 +176,13 @@ Props that can be passed to the component are listed below:
 		</tr>
 		<tr>
 			<td><code><b>ratingAverageIconProps?:</b> object</code></td>
-			<td>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.</td>
+			<td>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.</td>
 			<td><code>undefined</code></td>
 		</tr>
 		<tr>
 			<td><code><b>thousandsSeparator?:</b> string</code></td>
 			<td>A string specifying the custom thousands separator for formatting a numerical value.</td>
-			<td><code>','</code></td>
+			<td><code>undefined</code></td>
 		</tr>
 		<tr>
 			<td><code><b>ratingAverageSubText?:</b> string</code></td>
@@ -194,6 +194,11 @@ Props that can be passed to the component are listed below:
 			<td>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.</td>
 		<td><code>'REVERSE'</code></td>
 		</tr>
+    <tr>
+			<td><code><b>ratingLabelIconProps?:</b> object</code></td>
+			<td>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.</td>
+			<td><code>undefined</code></td>
+		</tr>
 	</tbody>
 </table>
 

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'
   }
 };

src/rating-average/RatingAverage.tsx

@@ -24,7 +24,7 @@ const RatingAverage: FC<IRatingAverageProp> = (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<IRatingAverageProp> = (props) => {
               <Star
                 fillColor={fillColor}
                 bgColor={bgColor}
+                borderColor={borderColor}
+                borderWidth={borderWidth}
                 colorFilledFraction={1}
                 id={`completely-filled-star-${index}`}
               />
@@ -79,6 +81,8 @@ const RatingAverage: FC<IRatingAverageProp> = (props) => {
             <Star
               fillColor={fillColor}
               bgColor={bgColor}
+              borderColor={borderColor}
+              borderWidth={borderWidth}
               colorFilledFraction={visibleStarFraction}
               id="fraction-filled-star"
             />
@@ -95,6 +99,8 @@ const RatingAverage: FC<IRatingAverageProp> = (props) => {
               <Star
                 fillColor={fillColor}
                 bgColor={bgColor}
+                borderColor={borderColor}
+                borderWidth={borderWidth}
                 colorFilledFraction={0}
                 id={`unfilled-star-${index}`}
               />

src/rating-average/star/Star.tsx

@@ -3,17 +3,20 @@ import React, { FC } from 'react';
 import { StarProp } from './types';
 
 const Star: FC<StarProp> = (props) => {
-  const { fillColor, bgColor, colorFilledFraction, id } = props;
+  const { fillColor, bgColor, colorFilledFraction, borderColor, borderWidth = 2, id } = props;
+  const borderFallBackColor = borderColor || fillColor;
 
   return (
-    <svg width="100%" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <svg width="100%" viewBox="-2 -2 36 36" xmlns="http://www.w3.org/2000/svg">
       <defs>
         <linearGradient id={id} shapeRendering="crispEdges">
           <stop offset={colorFilledFraction} stopColor={fillColor} />
           <stop offset="0%" stopColor={bgColor} />
         </linearGradient>
       </defs>
       <path
+        stroke={borderFallBackColor}
+        strokeWidth={borderWidth}
         fill={`url(#${id})`}
         d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,12.118
   l11.547-1.2L16.026,0.6L20.388,10.918z"

src/rating-average/star/types.d.ts

@@ -1,6 +1,6 @@
-import { RatingAverageIconProps } from '../../rating-summary/types';
+import { RatingIconProps } from '../../rating-summary/types';
 
-export interface StarProp extends RatingAverageIconProps {
+export interface StarProp extends RatingIconProps {
   colorFilledFraction: number;
   id: string;
 }

src/rating-average/styles.module.scss

@@ -6,8 +6,8 @@
   row-gap: 4px;
 }
 .averageRatingValue {
-  font-size: 60px;
-  font-weight: 200;
+  font-size: 36px;
+  font-weight: 600;
   margin: 0;
 }
 .iconsWrapper {
@@ -19,8 +19,8 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  color: #a9a9a9;
-  font-size: 14px;
+  color: #1D1D1D;
+  font-size: 12px;
   min-width: 104px;
   padding-top: 4px;
   column-gap: 4px;

src/rating-average/types.d.ts

@@ -2,7 +2,7 @@ import {
   CustomAverageFn,
   CustomStyles,
   IRatings,
-  RatingAverageIconProps,
+  RatingIconProps,
   RatingRanks
 } from '../rating-summary/types';
 
@@ -11,7 +11,7 @@ export interface IRatingAverageProp {
   ranks?: RatingRanks;
   customAverageFn?: CustomAverageFn;
   averageRatingPrecision: number;
-  iconProps?: RatingAverageIconProps;
+  iconProps?: RatingIconProps;
   styles?: CustomStyles;
   thousandsSeparator?: string;
   ratingAverageSubText: string;

src/rating-distribution-item/RatingDistributionItem.tsx

@@ -1,8 +1,8 @@
 import React, { FC } from 'react';
 
 import { IRatingDistributionProp } from './types';
-import { DEFAULT_BAR_COLORS, Elements } from '../constants';
-import { formatNumber, getStyles, isValidNumber } from '../utils';
+import { Elements, DEFAULT_COLOR } from '../constants';
+import { formatNumber, getStyles } from '../utils';
 import classes from './styles.module.scss';
 
 const RatingDistributionItem: FC<IRatingDistributionProp> = (props) => {
@@ -24,13 +24,11 @@ const RatingDistributionItem: FC<IRatingDistributionProp> = (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 (
+    <>
     <div
       className={classes.barContainer}
       style={getStyles(styles, Elements.BarContainer, currentRatingId)}
@@ -59,7 +57,10 @@ const RatingDistributionItem: FC<IRatingDistributionProp> = (props) => {
             showAnimation && classes.animations
           }`}
         >
-          {showCount && (
+        </div>
+      </div>
+      </div>
+    {showCount && (
             <span
               className={classes.countContainer}
               style={getStyles(styles, Elements.Count, currentRatingId)}
@@ -68,9 +69,7 @@ const RatingDistributionItem: FC<IRatingDistributionProp> = (props) => {
               {formatNumber(currentRatingValue, thousandsSeparator)}
             </span>
           )}
-        </div>
-      </div>
-    </div>
+    </>
   );
 };
 

src/rating-distribution-item/styles.module.scss

@@ -7,25 +7,31 @@
   }
 }
 .barContainer {
+  background-color: #F2F2F2;
+  height: 16px;
+  border-radius: 4px;
   width: 100%;
   display: table-cell;
 }
 .filledBarContainer {
   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;

src/rating-label/RatingLabel.tsx

@@ -1,26 +1,35 @@
 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<IRatingLabelProp> = (props) => {
-  const { ratingId, styles } = props;
+  const { ratingId, styles, iconProps } = props;
+  const { icon } = RATING_AVERAGE_DEFAULTS;
+  const { fillColor = icon.fillColor } = iconProps || {};
 
   return (
     <div
       className={classes.label}
       id={`${ratingId}-label`}
       style={getStyles(styles, Elements.Label, ratingId)}
     >
-      <img
+      <div
         className={classes.starImage}
         style={getStyles(styles, Elements.LabelStarIcon, ratingId)}
-        src={starImg}
-        alt=""
-      />
+      >
+        <Star
+          fillColor={fillColor}
+          colorFilledFraction={1}
+          id={`label-star-${ratingId}`}
+        />
+      </div>
       {ratingId}
     </div>
   );

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;
 }

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
 };

src/rating-summary/RatingSummary.tsx

@@ -22,6 +22,7 @@ const RatingSummary: FC<ISummaryProp> = (props) => {
     customAverageFn,
     averageRatingPrecision = 1,
     ratingAverageIconProps = {},
+    ratingLabelIconProps = {},
     thousandsSeparator,
     ratingAverageSubText = 'reviews',
     order = ORDER.REVERSE
@@ -71,7 +72,7 @@ const RatingSummary: FC<ISummaryProp> = (props) => {
             style={getStyles(styles, Elements.SummaryItemContainer, ratingId)}
           >
             {(renderLabel && <>{renderLabel(ratingId)}</>) || (
-              <RatingLabel ratingId={ratingId} styles={styles} />
+              <RatingLabel ratingId={ratingId} styles={styles} iconProps={ratingLabelIconProps}/>
             )}
             <RatingDistributionItem
               currentRatingId={ratingId}

src/rating-summary/styles.module.scss

@@ -5,7 +5,7 @@
 }
 .ratingsWrapper {
   display: table;
-  border-spacing: 0 4px;
+  border-spacing: 0 8px;
   width: 100%;
   row-gap: 4px;
   font-family: inherit;

src/rating-summary/types.d.ts

@@ -26,9 +26,11 @@ export type CustomStyles = GenericCustomStyles | SpecificCustomStyles;
 
 export type BarColors = { [value in keyof IRatings]: string };
 
-export interface RatingAverageIconProps {
+export interface RatingIconProps {
   fillColor?: string;
   bgColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
 }
 
 export type CustomAverageFn = (ratings: IRatings, ranks: RatingRanks) => 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;