Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] Info Hover Messages for COD, KDMs, Status #109

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 56 additions & 11 deletions components/KeyDevelopmentMilestone/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
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,
Expand All @@ -10,22 +16,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) {
Expand All @@ -42,10 +74,23 @@ export default function KeyDevelopmentMilestone({
statusLabel = 'Pending';
}

const renderWithTooltip = (milestone: (typeof milestones)[number]) => {
const { label, description } = milestone;

return (
<span>
<KDMInfoHoverContainer>
{label}
{description && <KDMInfoText>{description}</KDMInfoText>}
</KDMInfoHoverContainer>
</span>
);
};

return (
<Milestone $completed={completed}>
<MilestoneTitle>
{milestoneLabels[index]}
{renderWithTooltip(milestone)}
{completed ? (
<CheckmarkIcon width={'9'} height={'8'} />
) : (
Expand Down
39 changes: 39 additions & 0 deletions components/KeyDevelopmentMilestone/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
83 changes: 53 additions & 30 deletions components/StatusTag/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: <GreenDotOperationalIcon />,
color: COLORS.aceGreen,
info: 'The project has been built and delivers power to the NYS grid.',
},
Proposed: {
icon: <GreyDotInProgressIcon />,
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() {
Expand All @@ -23,40 +44,42 @@ export default function StatusTag({
return `${month}.${day}.${year}`;
}

const statusIcon: { [key: string]: JSX.Element } = {
Operational: <GreenDotOperationalIcon />,
Proposed: <GreyDotInProgressIcon />,
};
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 (
<div>
{cod ? (
<AllTagStyles>
<TagStyle $color={statusTextColor[projectStatus]}>
{statusIcon[projectStatus]}{' '}
<TagText1 $color={statusTextColor[projectStatus]}>
{projectStatus}
</TagText1>
</TagStyle>
<AllTagStyles>
<TagStyle $color={status.color}>
<InfoHoverContainer>
{status.icon}
<TagText1 $color={status.color}>{projectStatus}</TagText1>
<InfoHoverText>
<TagText1 $color={COLORS.navy}>{status.info}</TagText1>
</InfoHoverText>
</InfoHoverContainer>
</TagStyle>

{cod && (
<CODTagStyles>
<CalendarIcon />
<TagText1 $color={COLORS.electricBlue}>
COD {convertDateToString()}
</TagText1>
<InfoHoverContainer>
<InfoHoverText>
<TagText1 $color={COLORS.navy}>
The date on which the project begins delivering power.
</TagText1>
</InfoHoverText>
<CalendarIcon />
<TagText1 $color={COLORS.electricBlue}>
COD {convertDateToString()}
</TagText1>
</InfoHoverContainer>
</CODTagStyles>
</AllTagStyles>
) : (
<TagStyle $color={statusTextColor[projectStatus]}>
{statusIcon[projectStatus]}{' '}
<TagText1 $color={statusTextColor[projectStatus]}>
{projectStatus}
</TagText1>
</TagStyle>
)}
)}
</AllTagStyles>
</div>
);
}
37 changes: 37 additions & 0 deletions components/StatusTag/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
Loading