Lakehead - CEM-2602 Profile list with counter

src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx

@@ -87,12 +87,26 @@ const profiles = [
 export default {
     title: createStoryTitle('Featured Profiles Card'),
     component: FeaturedProfilesCard,
-    args: {
-        profileData: profiles,
-        alt: 'Profile Image',
-    },
 } as Meta;
 
-export const Demo: Story<IFeaturedProfilesCardProps> = (args) => (
+const Template: Story<IFeaturedProfilesCardProps> = (args) => (
     <FeaturedProfilesCard {...args} />
 );
+
+export const Basic = Template.bind({});
+Basic.args = {
+    profileData: profiles,
+    counterBool: false,
+};
+
+export const NoProfiles = Template.bind({});
+NoProfiles.args = {
+    profileData: [],
+    counterBool: false,
+};
+
+export const CounterOn = Template.bind({});
+CounterOn.args = {
+    profileData: profiles,
+    counterBool: true,
+};

src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx

@@ -20,10 +20,13 @@ export interface IProfile {
 
 export interface IFeaturedProfilesCardProps {
     profileData: IProfile[];
+    counterBool: boolean;
 }
 
 export const FeaturedProfilesCard: React.FC<IFeaturedProfilesCardProps> = ({
-    profileData,
+    profileData, //the array of profiles to be displayed
+    counterBool, //if true, the profile counter is displayed, and if false, the counter is not displayed
+    ...props
 }): React.ReactElement => {
     const renderProfileCircles = useCallback(() => {
         const determineProfilePictureLimit = () => {
@@ -56,32 +59,27 @@ export const FeaturedProfilesCard: React.FC<IFeaturedProfilesCardProps> = ({
             profile: IProfile,
             index: number,
         ): React.ReactElement => {
+            const featuredProfileProps = {
+                key: profile.id,
+                background: 'none'
+            };
+
             switch (true) {
             case index < determineProfilePictureLimit():
-                return (
-                    <FeaturedProfile
-                        key={profile.id}
-                        image={profile.image}
-                        background="none"
-                    />
-                );
+                featuredProfileProps['image'] = profile.image;
+
             case index < profileInitialsEndIndex:
-                return (
-                    <FeaturedProfile
-                        key={profile.id}
-                        initials={profile.initials}
-                        background="orange"
-                    />
-                );
+                featuredProfileProps['initials'] = profile.initials;
+                featuredProfileProps['background'] = "orange";
+
             default:
-                return (
-                    <FeaturedProfile
-                        key={profile.id}
-                        remainingProfiles={remainingProfiles}
-                        background="gray"
-                    />
-                );
+                featuredProfileProps['remainingProfiles'] = {remainingProfiles};
+                featuredProfileProps['background'] = "gray";
             }
+
+            return (
+                <FeaturedProfile {...featuredProfileProps}/>
+            )
         };
 
         return profiles.map(
@@ -90,14 +88,19 @@ export const FeaturedProfilesCard: React.FC<IFeaturedProfilesCardProps> = ({
     }, [profileData]);
 
     return (
-        <Container>
-            {renderProfileCircles()}
-            <FeaturedProfile icon key={ADD_USER_ICON_KEY} background="grey" />
-        </Container>
+        <Holder>
+            <Container>
+                {renderProfileCircles()}
+                <FeaturedProfile icon key={ADD_USER_ICON_KEY} background="grey" />
+            </Container>
+            {counterBool && <CountContainer>{profileData.length}</CountContainer>}
+        </Holder>
+
     );
 };
 
 const Container = styled.ul`
+
     ${flex('row')}
     padding: 5px;
 
@@ -120,3 +123,13 @@ const Container = styled.ul`
         z-index: -3;
     }
 `;
+
+const CountContainer = styled.div`
+    font-size 40px;
+    height 150px;
+    line-height 150px;
+    text-align:center;
+`
+const Holder = styled.div`
+    display: flex;
+`

src/Containers/index.ts

@@ -88,4 +88,4 @@ export * from './CustomerProfile/CustomerProfile';
 export * from './CreatedDate/CreatedDate';
 export * from './CRMRow/CRMRow';
 export * from './CRMTable/CRMTable';
-export * from './LimitedTimeBanner/LimitedTimeBanner';
+export * from './LimitedTimeBanner/LimitedTimeBanner';