diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx index d4ece4f1..089ad38e 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx +++ b/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 = (args) => ( +const Template: Story = (args) => ( ); + +export const Basic = Template.bind({}); +Basic.args = { + profileData: profiles, + isCounterShowing: false, +}; + +export const NoProfiles = Template.bind({}); +NoProfiles.args = { + profileData: [], + isCounterShowing: false, +}; + +export const CounterOn = Template.bind({}); +CounterOn.args = { + profileData: profiles, + isCounterShowing: true, +}; diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx index 926871c2..b1aa99b3 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx @@ -20,10 +20,13 @@ export interface IProfile { export interface IFeaturedProfilesCardProps { profileData: IProfile[]; + isCounterShowing: boolean; } export const FeaturedProfilesCard: React.FC = ({ - profileData, + profileData, //the array of profiles to be displayed + isCounterShowing, //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 = ({ profile: IProfile, index: number, ): React.ReactElement => { + const featuredProfileProps = { + key: profile.id, + background: 'none' + }; + switch (true) { case index < determineProfilePictureLimit(): - return ( - - ); + featuredProfileProps['image'] = profile.image; + case index < profileInitialsEndIndex: - return ( - - ); + featuredProfileProps['initials'] = profile.initials; + featuredProfileProps['background'] = "orange"; + default: - return ( - - ); + featuredProfileProps['remainingProfiles'] = {remainingProfiles}; + featuredProfileProps['background'] = "gray"; } + + return ( + + ) }; return profiles.map( @@ -90,14 +88,19 @@ export const FeaturedProfilesCard: React.FC = ({ }, [profileData]); return ( - - {renderProfileCircles()} - - + + + {renderProfileCircles()} + + + {isCounterShowing && {profileData.length}} + + ); }; 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; +` \ No newline at end of file diff --git a/src/Containers/index.ts b/src/Containers/index.ts index 4e0fd8c0..a0c9b6dc 100644 --- a/src/Containers/index.ts +++ b/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'; \ No newline at end of file +export * from './LimitedTimeBanner/LimitedTimeBanner';