feat: Added a new prop, updated README, storybook, test files and style fixes (#15)

Author: anjuca154

README.md

@@ -47,11 +47,12 @@ const dataArray = [
     avatarUrl: "example.svg"
   },
   {
-    name: "Jack"
-    renderComponent: () => <div className="sample-class"> Sample Component <div>
+    name: "Jack",
+    renderComponent: () => (
+      <div className="sample-class"> Sample Component </div>
+    )
   }
 ];
-
 ```
 
 If no avatarUrl is specified for the user, following default Image will be considered.
@@ -88,7 +89,7 @@ This release includes breaking changes, new features, and updates. Please read t
   styles={{
     Avatar: () => ({ ...styles }),
     Name: () => ({ ...styles }),
-    ExtraValue: () => ({ ...styles }),
+    ExtraValue: () => ({ ...styles })
   }}
 />
 ```
@@ -103,7 +104,7 @@ This release includes breaking changes, new features, and updates. Please read t
   styles={{
     Avatar: () => ({ ...styles }),
     Name: () => ({ ...styles }),
-    ExtraCount: () => ({ ...styles }),
+    ExtraCount: () => ({ ...styles })
   }}
 />
 ```
@@ -140,7 +141,7 @@ Props that can be passed to the component are listed below:
       <td>
       To specify the size of the image element
       </td>
-      <td><code>40px</code></td>
+      <td><code>40</code></td>
     </tr>
      <tr>
       <td><code><b>variant?:</b> 'circular' | 'square' | 'rounded'</code></td>
@@ -159,19 +160,26 @@ Props that can be passed to the component are listed below:
     <tr>
       <td><code><b>showNameOnHover?:</b> boolean</code></td>
       <td>
-        To show the name of each user on hovering over the user image
+        To show the name of each user on hovering over the user image. If there is a specified render component in the data array, it will be displayed instead of the name when you hover over the user's image
       </td>
       <td><code>false</code></td>
+    </tr>
+      <tr>
+      <td><code><b>defaultAvatarImage?:</b> string</code></td>
+      <td>
+       To show a default avatar, if no avatarUrl is specified for a user. if there is no specified avatarUrl and defaultAvatarImage, default image will be considered.
+      </td>
+      <td><code><img src="./src/assets/default-avatar.svg" alt="" width="40" height="40"/></code></td>
     </tr>
     <tr>
-      <td><code><b>onUserClick?:</b> function</code></td>
+      <td><code><b>onUserClick?:</b>(user: object) => void</code></td>
       <td>
         A callback function to be triggered on image click
       </td>
       <td><code>undefined</code></td>
     </tr>
      <tr>
-      <td><code><b>onCountClick?:</b> function</code></td>
+      <td><code><b>onCountClick?:</b>() => void</code></td>
       <td>
         A callback function to be triggered on additional count(last bubble) click
       </td>
@@ -214,3 +222,28 @@ The below code shows all the overridable styles:
 - `Avatar` - Overrides the avatar (user image) style
 - `Name` - Overrides the user name style
 - `ExtraCount` - Overrides the style of additional count displayed at last bubble
+
+Example with the usage of other props
+
+```jsx
+<InlineImages
+  data={dataArray}
+  styles= {
+    Avatar: () => ({
+      border: "1px solid white"
+    }),
+    Name: () => ({
+      color: "white",
+      fontSize: "16px",
+      backgroundColor: "grey",
+      padding: "5px",
+      borderRadius: "10px"
+    }),
+    ExtraCount: () => ({
+      backgroundColor: "yellow",
+      border: "1px solid white"
+    })
+  }
+/>
+
+```

package.json

@@ -93,6 +93,9 @@
   "eslintConfig": {
     "extends": "./.eslintrc.json"
   },
+  "prettier": {
+    "trailingComma": "none"
+  },
   "jest": {
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/testMock.js",

src/lib/inline-images/Avatar.tsx

@@ -8,7 +8,8 @@ import classes from "./styles.module.scss";
 
 const Avatar = (props: AvatarPropType): JSX.Element => {
   const {
-    avatarUrl = defaultImage,
+    avatarUrl,
+    defaultAvatarImage = defaultImage,
     variant,
     renderComponent,
     size,
@@ -32,14 +33,14 @@ const Avatar = (props: AvatarPropType): JSX.Element => {
         className={`${variant && classes[variant]} ${
           elevateOnHover && classes.elevateOnHover
         }`}
-        src={avatarUrl}
+        src={avatarUrl || defaultAvatarImage}
         style={{
           width: `${size}px`,
           height: `${size}px`,
           ...getStyles(Elements.Avatar, styles)
         }}
         onError={(e: React.SyntheticEvent<HTMLImageElement, Event>): void => {
-          e.currentTarget.src = defaultImage;
+          e.currentTarget.src = defaultAvatarImage;
         }}
         id="avatar-image"
         alt="image"
@@ -52,14 +53,14 @@ const Avatar = (props: AvatarPropType): JSX.Element => {
           <div
             id="avatar-name"
             className={classes.name}
-            style={getStyles(Elements.Name, styles)}
+            style={{ top: `${size}px`, ...getStyles(Elements.Name, styles) }}
           >
             {name}
           </div>
         )
       )}
     </div>
-  )
+  );
 };
 
-export default Avatar;
+export default Avatar;

src/lib/inline-images/InlineImages.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 
+import defaultImage from "../../assets/default-avatar.svg";
 import {
   DEFAULT_AVATAR_SIZE,
   DEFAULT_SPACE_BETWEEN_PICS,
@@ -16,6 +17,7 @@ const InlineImages = (props: InlineImagesPropType): JSX.Element => {
     totalUserCount,
     elevateOnHover,
     showNameOnHover,
+    defaultAvatarImage = defaultImage,
     onUserClick,
     onCountClick,
     size = DEFAULT_AVATAR_SIZE,
@@ -28,7 +30,7 @@ const InlineImages = (props: InlineImagesPropType): JSX.Element => {
     <div className={classes.imagesContainer}>
       {data?.map((user: AvatarDataType, index: number) => (
         <div
-          key={user && user.name ?`${user.name}-${index}`: index}
+          key={user && user.name ? `${user.name}-${index}` : index}
           className={classes.eachImage}
           style={{
             left: `${index * spaceBetweenPics}px`
@@ -38,12 +40,13 @@ const InlineImages = (props: InlineImagesPropType): JSX.Element => {
           <Avatar
             avatarUrl={user.avatarUrl}
             name={user.name}
-            renderComponent = {user.renderComponent}
+            renderComponent={user.renderComponent}
             elevateOnHover={elevateOnHover}
             showNameOnHover={showNameOnHover}
             onUserClick={(): void => {
               if (onUserClick) onUserClick(user);
             }}
+            defaultAvatarImage={defaultAvatarImage}
             variant={variant}
             size={size}
             id={`inline-image-${index}`}
@@ -61,12 +64,17 @@ const InlineImages = (props: InlineImagesPropType): JSX.Element => {
             left: `${data?.length * spaceBetweenPics}px`,
             width: `${size}px`,
             height: `${size}px`,
+            // Adjust the font size of the value based on the number of digits and size of the bubble
+            fontSize: `${
+              size *
+              (0.4 - 0.03 * Math.log10(Math.abs(totalUserCount - data?.length)))
+            }px`,
             ...getStyles(Elements.ExtraCount, styles)
           }}
           onClick={onCountClick}
           id="inline-images-extra-count"
         >
-          {totalUserCount - data?.length} +
+          +{totalUserCount - data?.length}
         </div>
       )}
     </div>

src/lib/inline-images/styles.module.scss

@@ -18,13 +18,13 @@
     &:hover + .name{
         display: flex;
         position: absolute;
-        top: 40px;
         margin-top: 20px;
         justify-content: center;
       }
   }
 }
 .imagesContainer {
+  position: relative;
   .circular{
     border-radius: 50%;
   }

src/lib/inline-images/types.d.ts

@@ -2,6 +2,7 @@ export interface AvatarPropType {
   avatarUrl?: string,
   name?: string,
   variant?: 'circular' | 'square' | 'rounded',
+  defaultAvatarImage?: string,
   size?: number,
   renderComponent?: () => JSX.Element,
   elevateOnHover?: boolean,
@@ -19,6 +20,7 @@ export interface AvatarDataType {
 
 export interface InlineImagesPropType {
   data: AvatarDataType[],
+  defaultAvatarImage?: string,
   totalUserCount?: number,
   variant?: 'circular' | 'square' | 'rounded',
   elevateOnHover?: boolean,

src/lib/tests/inlineImages.test.tsx

@@ -56,7 +56,7 @@ test("If additional count displayed on image stack", async () => {
 
   if (dom) {
     const extraCount = await getById(dom.container, "inline-images-extra-count");
-    expect(extraCount.innerHTML).toBe("8 +");
+    expect(extraCount.innerHTML).toBe("+8");
   }
 });
 

src/stories/InlineImages.stories.tsx

@@ -11,7 +11,7 @@ export default {
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: "fullscreen"
-  },
+  }
 } as ComponentMeta<typeof Component>;
 
 const Template: ComponentStory<typeof Component> = (props) => (
@@ -25,15 +25,15 @@ ComponentWithDefaultImage.args = {
     {
       avatarUrl: sampleAvatarImage,
       name: "Jon Dew"
-    },
+    }
   ],
   totalUserCount: 10,
   elevateOnHover: true,
   showNameOnHover: true
 };
 
-export const ComponentWithSpaceInBetween = Template.bind({});
-ComponentWithSpaceInBetween.args = {
+export const ComponentWithSpaceInBetweenAndDefaultAvatarImage = Template.bind({});
+ComponentWithSpaceInBetweenAndDefaultAvatarImage.args = {
   data: [
     {
       name: "Alice Smith"
@@ -47,6 +47,7 @@ ComponentWithSpaceInBetween.args = {
   ],
   spaceBetweenPics: 50,
   variant: "square",
+  defaultAvatarImage: "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png",
   showNameOnHover: true,
   styles: {
     Name: () => ({
@@ -69,7 +70,7 @@ ComponentWithEventHandlers.args = {
     {
       avatarUrl: sampleAvatarImage,
       name: "Bob Johnson"
-    },
+    }
   ],
   totalUserCount: 6,
   elevateOnHover: true,
@@ -79,7 +80,7 @@ ComponentWithEventHandlers.args = {
   },
   onCountClick: () => {
     alert(`Clicked on the additional count`);
-  },
+  }
 };
 
 export const ComponentWithCustomStyles = Template.bind({});