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}
-
-
- )}
+ )}
+