From 9148b9ad09985975c897745086e1856323af90cd Mon Sep 17 00:00:00 2001 From: percypie Date: Wed, 24 Nov 2021 14:10:59 -0500 Subject: [PATCH 1/5] Functions but does not adjust position dynamically --- .../FeaturedProfilesCount.stories.tsx | 98 +++++++++++++++++++ .../FeaturedProfilesCount.tsx | 21 ++++ src/Containers/index.ts | 3 +- 3 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx create mode 100644 src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx diff --git a/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx b/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx new file mode 100644 index 00000000..9648ff37 --- /dev/null +++ b/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { createStoryTitle } from '../../Constants'; +import { FeaturedProfilesCard, IFeaturedProfilesCardProps, FeaturedProfilesCount} from "index"; + +const profiles = [ + { + image: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg&fm=jpg', + initials: 'AC', + id: 2345, + }, + { + image: + 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg&fm=jpg', + initials: 'BD', + id: 6312, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'CG', + id: 5455, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'TY', + id: 5765, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'ER', + id: 5098, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'GC', + id: 6355, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'YN', + id: 7643, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'OY', + id: 3984, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'MN', + id: 1734, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'CG', + id: 9034, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'CG', + id: 9034, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'CG', + id: 9034, + }, + { + image: + 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', + initials: 'CG', + id: 9034, + }, +]; + +export default { + title: createStoryTitle('FeaturedProfilesCount'), + component: FeaturedProfilesCount, + subcomponent: FeaturedProfilesCard, + args:{ + profileData: profiles, + } +}as Meta; + +export const Basic: Story = (args) => ( + <> +) \ No newline at end of file diff --git a/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx b/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx new file mode 100644 index 00000000..3b313d0f --- /dev/null +++ b/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import styled from 'styled-components'; +import {IFeaturedProfilesCardProps} from 'index'; + +export const FeaturedProfilesCount: React.FC = ({ + profileData, //the array of profiles to be displayed. + ...props +}): React.ReactElement => ( + {profileData.length} +) + +const CountContainer = styled.span` + position: relative; + top: -105px; + left: 660px; + color: black; + font-size: 50px + +`; + +//todo Make location change with amount of profiles (currently having issues trying to make Featured profile card not generate a new line without being able to edit it) \ No newline at end of file diff --git a/src/Containers/index.ts b/src/Containers/index.ts index 4e0fd8c0..6311aeeb 100644 --- a/src/Containers/index.ts +++ b/src/Containers/index.ts @@ -88,4 +88,5 @@ 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'; +export * from './FeaturedProfilesCount/FeaturedProfilesCount'; From cb8190c477f75dda7cecc194a97557a502af3c4a Mon Sep 17 00:00:00 2001 From: percypie Date: Wed, 24 Nov 2021 15:36:12 -0500 Subject: [PATCH 2/5] Implemented the counter on the existing component --- .../FeaturedProfilesCount.stories.tsx | 98 ------------------- .../FeaturedProfilesCount.tsx | 21 ---- .../FeaturedProfilesCard.tsx | 23 ++++- src/Containers/index.ts | 1 - 4 files changed, 19 insertions(+), 124 deletions(-) delete mode 100644 src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx delete mode 100644 src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx diff --git a/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx b/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx deleted file mode 100644 index 9648ff37..00000000 --- a/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React from 'react'; -import { Meta, Story } from '@storybook/react'; -import { createStoryTitle } from '../../Constants'; -import { FeaturedProfilesCard, IFeaturedProfilesCardProps, FeaturedProfilesCount} from "index"; - -const profiles = [ - { - image: - 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg&fm=jpg', - initials: 'AC', - id: 2345, - }, - { - image: - 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg&fm=jpg', - initials: 'BD', - id: 6312, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'CG', - id: 5455, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'TY', - id: 5765, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'ER', - id: 5098, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'GC', - id: 6355, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'YN', - id: 7643, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'OY', - id: 3984, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'MN', - id: 1734, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'CG', - id: 9034, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'CG', - id: 9034, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'CG', - id: 9034, - }, - { - image: - 'https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?cs=srgb&dl=pexels-andrea-piacquadio-3763188.jpg&fm=jpg', - initials: 'CG', - id: 9034, - }, -]; - -export default { - title: createStoryTitle('FeaturedProfilesCount'), - component: FeaturedProfilesCount, - subcomponent: FeaturedProfilesCard, - args:{ - profileData: profiles, - } -}as Meta; - -export const Basic: Story = (args) => ( - <> -) \ No newline at end of file diff --git a/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx b/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx deleted file mode 100644 index 3b313d0f..00000000 --- a/src/Containers/FeaturedProfilesCount/FeaturedProfilesCount.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import {IFeaturedProfilesCardProps} from 'index'; - -export const FeaturedProfilesCount: React.FC = ({ - profileData, //the array of profiles to be displayed. - ...props -}): React.ReactElement => ( - {profileData.length} -) - -const CountContainer = styled.span` - position: relative; - top: -105px; - left: 660px; - color: black; - font-size: 50px - -`; - -//todo Make location change with amount of profiles (currently having issues trying to make Featured profile card not generate a new line without being able to edit it) \ No newline at end of file diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx index 926871c2..193453cb 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx @@ -90,14 +90,19 @@ export const FeaturedProfilesCard: React.FC = ({ }, [profileData]); return ( - - {renderProfileCircles()} - - + + + {renderProfileCircles()} + + + {profileData.length} + + ); }; const Container = styled.ul` + ${flex('row')} padding: 5px; @@ -120,3 +125,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 6311aeeb..a0c9b6dc 100644 --- a/src/Containers/index.ts +++ b/src/Containers/index.ts @@ -89,4 +89,3 @@ export * from './CreatedDate/CreatedDate'; export * from './CRMRow/CRMRow'; export * from './CRMTable/CRMTable'; export * from './LimitedTimeBanner/LimitedTimeBanner'; -export * from './FeaturedProfilesCount/FeaturedProfilesCount'; From 15feb92e740d1e014e837afd63f8063b6bab5700 Mon Sep 17 00:00:00 2001 From: percypie Date: Wed, 24 Nov 2021 19:00:12 -0500 Subject: [PATCH 3/5] Added a boolean that can be turned on to display counter --- .../FeaturesProfileCard/FeaturedProfilesCard.stories.tsx | 3 +++ .../FeaturesProfileCard/FeaturedProfilesCard.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx index d4ece4f1..5a6f989d 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx @@ -90,9 +90,12 @@ export default { args: { profileData: profiles, alt: 'Profile Image', + counterBool: false, }, } as Meta; export const Demo: Story = (args) => ( ); + +//todo different use cases presets. \ No newline at end of file diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx index 193453cb..65e8166c 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[]; + counterBool: boolean; } export const FeaturedProfilesCard: React.FC = ({ - 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 = () => { @@ -95,7 +98,7 @@ export const FeaturedProfilesCard: React.FC = ({ {renderProfileCircles()} - {profileData.length} + {counterBool && {profileData.length}} ); From 26ae7e127f2ec48356e40f3e8c13a999c3411a77 Mon Sep 17 00:00:00 2001 From: percypie Date: Fri, 26 Nov 2021 11:20:41 -0500 Subject: [PATCH 4/5] meeting fixes --- .../FeaturedProfilesCard.stories.tsx | 25 +++++++++---- .../FeaturedProfilesCard.tsx | 37 ++++++++----------- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx index 5a6f989d..9ea88752 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx @@ -87,15 +87,26 @@ const profiles = [ export default { title: createStoryTitle('Featured Profiles Card'), component: FeaturedProfilesCard, - args: { - profileData: profiles, - alt: 'Profile Image', - counterBool: false, - }, } as Meta; -export const Demo: Story = (args) => ( +const Template: Story = (args) => ( ); -//todo different use cases presets. \ No newline at end of file +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, +}; diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx index 65e8166c..981a5f1c 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx @@ -59,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( From 6f34cb1534ab91c6e5017f440f3059a4eefd1956 Mon Sep 17 00:00:00 2001 From: percypie Date: Fri, 26 Nov 2021 14:55:17 -0500 Subject: [PATCH 5/5] Changed counterBool to isCounterShowing --- .../FeaturesProfileCard/FeaturedProfilesCard.stories.tsx | 6 +++--- .../FeaturesProfileCard/FeaturedProfilesCard.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx index 9ea88752..089ad38e 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx @@ -96,17 +96,17 @@ const Template: Story = (args) => ( export const Basic = Template.bind({}); Basic.args = { profileData: profiles, - counterBool: false, + isCounterShowing: false, }; export const NoProfiles = Template.bind({}); NoProfiles.args = { profileData: [], - counterBool: false, + isCounterShowing: false, }; export const CounterOn = Template.bind({}); CounterOn.args = { profileData: profiles, - counterBool: true, + isCounterShowing: true, }; diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx index 981a5f1c..b1aa99b3 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.tsx @@ -20,12 +20,12 @@ export interface IProfile { export interface IFeaturedProfilesCardProps { profileData: IProfile[]; - counterBool: boolean; + isCounterShowing: boolean; } export const FeaturedProfilesCard: React.FC = ({ profileData, //the array of profiles to be displayed - counterBool, //if true, the profile counter is displayed, and if false, the counter is not displayed + isCounterShowing, //if true, the profile counter is displayed, and if false, the counter is not displayed ...props }): React.ReactElement => { const renderProfileCircles = useCallback(() => { @@ -76,7 +76,7 @@ export const FeaturedProfilesCard: React.FC = ({ featuredProfileProps['remainingProfiles'] = {remainingProfiles}; featuredProfileProps['background'] = "gray"; } - + return ( ) @@ -93,7 +93,7 @@ export const FeaturedProfilesCard: React.FC = ({ {renderProfileCircles()} - {counterBool && {profileData.length}} + {isCounterShowing && {profileData.length}} );