From 5f27250fe87f8e778f3a19a17e595a7b0c8d3b36 Mon Sep 17 00:00:00 2001 From: Neha Date: Mon, 13 Jan 2025 12:36:21 -0600 Subject: [PATCH 1/2] [feat] infohover refactoring --- components/KeyDevelopmentMilestone/index.tsx | 70 ++++++++++++++--- components/KeyDevelopmentMilestone/styles.ts | 39 +++++++++ components/StatusTag/index.tsx | 83 +++++++++++++------- components/StatusTag/styles.ts | 37 +++++++++ 4 files changed, 188 insertions(+), 41 deletions(-) diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx index 274791f..33e3b51 100644 --- a/components/KeyDevelopmentMilestone/index.tsx +++ b/components/KeyDevelopmentMilestone/index.tsx @@ -1,5 +1,12 @@ +import React from 'react'; import { CheckmarkIcon, DotDotDotIcon } from '../../assets/KDM-Icons/icons'; -import { Milestone, MilestoneLabel, MilestoneTitle } from './styles'; +import { + KDMInfoHoverContainer, + KDMInfoText, + Milestone, + MilestoneLabel, + MilestoneTitle, +} from './styles'; export default function KeyDevelopmentMilestone({ completed, @@ -10,22 +17,48 @@ export default function KeyDevelopmentMilestone({ date: string | null; index: number; }) { - let statusLabel = ''; - const milestoneLabels = [ - 'NYISO queue entered', - 'ORES permit applied', - 'ORES permit issued', - 'NYSERDA contracted', - 'IA tendered', - 'Operations begun', + const milestones = [ + { + label: 'NYISO queue entered', + description: + 'This means a project has submitted a formal request to be studied for possible connection to the NYS power grid. Projects may also connect to the grid without this step at a lower voltage.', + }, + { + label: 'ORES permit applied', + description: + 'This means a project has submitted its application to the NY Office of Renewable Energy Siting (ORES) for its primary environmental review.', + }, + { + label: 'ORES permit issued', + description: + 'This means a project has been issued its final permit by the NY Office of Renewable Energy Siting (ORES).', + }, + { + label: 'NYSERDA contracted', + description: 'New York State Energy Research and Development Authority', + }, + { + label: 'IA tendered', + description: + 'This means the project has completed all interconnection studies and has been offered an interconnection contract with the NYS grid.', + }, + { + label: 'Operations begun', + description: + 'The project is operational, delivering power to the NYS grid.', + }, ]; + + const milestone = milestones[index]; + let statusLabel = ''; + function getDate() { if (!date) return null; const res = new Date(date); return res; } // Sets status label to date of completion or 'Pending' if incomplete - if (milestoneLabels[index] === 'NYSERDA contracted' && date) { + if (milestone.label === 'NYSERDA contracted' && date) { const date_object = getDate(); statusLabel = String(date_object?.getFullYear()); } else if (date) { @@ -42,10 +75,25 @@ export default function KeyDevelopmentMilestone({ statusLabel = 'Pending'; } + const renderWithTooltip = (milestone: (typeof milestones)[number]) => { + const { label, description } = milestone; + + return ( + + + + {label} + {description && {description}} + + + + ); + }; + return ( - {milestoneLabels[index]} + {renderWithTooltip(milestone)} {completed ? ( ) : ( diff --git a/components/KeyDevelopmentMilestone/styles.ts b/components/KeyDevelopmentMilestone/styles.ts index 085decf..54e24ba 100644 --- a/components/KeyDevelopmentMilestone/styles.ts +++ b/components/KeyDevelopmentMilestone/styles.ts @@ -52,3 +52,42 @@ export const MilestoneTitle = styled.div` align-items: center; justify-content: space-between; `; + +export const KDMInfoHoverContainer = styled.div` + position: relative; + display: inline-flex; + cursor: pointer; + align-items: center; + gap: 0.25rem; + &:hover > div { + visibility: visible; + opacity: 1; + } +`; + +export const KDMInfoText = styled.div` + color: ${COLORS.navy}; + visibility: hidden; + width: 11rem; + background-color: white; + text-align: center; + border-radius: 0.25rem; + padding: 0.75rem; + position: absolute; + bottom: 150%; + white-space: normal; + box-shadow: + 0rem 1rem 1.25rem 0rem rgba(46, 58, 89, 0.1), + 0rem 0.0625rem 0.0625rem 0rem rgba(46, 58, 89, 0.15); + transform: translateX(-5%); + /* Tooltip arrow */ + &::after { + content: ''; + position: absolute; + top: 100%; + left: 0.625rem; + border-width: 0.313rem; + border-style: solid; + border-color: white transparent transparent transparent; + } +`; diff --git a/components/StatusTag/index.tsx b/components/StatusTag/index.tsx index 208f82a..12d0e80 100644 --- a/components/StatusTag/index.tsx +++ b/components/StatusTag/index.tsx @@ -5,13 +5,34 @@ import { GreyDotInProgressIcon, } from '../../assets/Status-Tag-Icons/icons'; import { TagText1 } from '../../styles/texts'; -import { AllTagStyles, CODTagStyles, TagStyle } from './styles'; +import { + AllTagStyles, + CODTagStyles, + InfoHoverContainer, + InfoHoverText, + TagStyle, +} from './styles'; + +const statusDetails = { + Operational: { + icon: , + color: COLORS.aceGreen, + info: 'The project has been built and delivers power to the NYS grid.', + }, + Proposed: { + icon: , + color: COLORS.ashGrey, + info: 'The project is still in the planning stages and has not begun delivering power.', + }, +}; + +type ProjectStatus = keyof typeof statusDetails | string; export default function StatusTag({ projectStatus, cod, }: { - projectStatus: string; + projectStatus: ProjectStatus; cod: Date | undefined; }) { function convertDateToString() { @@ -23,40 +44,42 @@ export default function StatusTag({ return `${month}.${day}.${year}`; } - const statusIcon: { [key: string]: JSX.Element } = { - Operational: , - Proposed: , - }; - const statusTextColor: { [key: string]: string } = { - Operational: COLORS.aceGreen, - Proposed: COLORS.ashGrey, + // Use a default fallback status for unknown statuses + const status = statusDetails[projectStatus as keyof typeof statusDetails] || { + icon: null, + color: COLORS.grey, // Fallback color + info: 'Status information unavailable.', }; return (
- {cod ? ( - - - {statusIcon[projectStatus]}{' '} - - {projectStatus} - - + + + + {status.icon} + {projectStatus} + + {status.info} + + + + + {cod && ( - - - COD {convertDateToString()} - + + + + The date on which the project begins delivering power. + + + + + COD {convertDateToString()} + + - - ) : ( - - {statusIcon[projectStatus]}{' '} - - {projectStatus} - - - )} + )} +
); } diff --git a/components/StatusTag/styles.ts b/components/StatusTag/styles.ts index 29ef61f..d766806 100644 --- a/components/StatusTag/styles.ts +++ b/components/StatusTag/styles.ts @@ -27,3 +27,40 @@ export const AllTagStyles = styled.div` justify-content: flex-start; align-items: center; `; + +export const InfoHoverContainer = styled.div` + position: relative; + display: flex; + cursor: pointer; + align-items: center; + gap: 0.25rem; + &:hover > div { + visibility: visible; + opacity: 1; + } +`; + +export const InfoHoverText = styled.div` + visibility: hidden; + width: 7rem; + background-color: white; + text-align: center; + border-radius: 0.25rem; + padding: 0.75rem; + position: absolute; + bottom: 130%; + white-space: normal; + box-shadow: + 0rem 1rem 1.25rem 0rem rgba(46, 58, 89, 0.1), + 0rem 0.0625rem 0.0625rem 0rem rgba(46, 58, 89, 0.15); + /* Tooltip arrow */ + &::after { + content: ''; + position: absolute; + top: 100%; + left: 0.625rem; + border-width: 0.313rem; + border-style: solid; + border-color: white transparent transparent transparent; + } +`; From 722c4dffc95fc2bd3d10ccc2d26aa287febdcb13 Mon Sep 17 00:00:00 2001 From: Neha Date: Mon, 13 Jan 2025 12:53:09 -0600 Subject: [PATCH 2/2] [chore] removed import --- components/KeyDevelopmentMilestone/index.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/components/KeyDevelopmentMilestone/index.tsx b/components/KeyDevelopmentMilestone/index.tsx index 33e3b51..67b17ba 100644 --- a/components/KeyDevelopmentMilestone/index.tsx +++ b/components/KeyDevelopmentMilestone/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { CheckmarkIcon, DotDotDotIcon } from '../../assets/KDM-Icons/icons'; import { KDMInfoHoverContainer, @@ -81,10 +80,8 @@ export default function KeyDevelopmentMilestone({ return ( - - {label} - {description && {description}} - + {label} + {description && {description}} );