[feat] infohover refactoring

calblueprint · Jan 13, 2025 · 5f27250 · 5f27250
1 parent 52fc141
commit 5f27250
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 41 deletions.
diff --git 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 (
+      <span>
+        <KDMInfoHoverContainer>
+          <React.Fragment>
+            {label}
+            {description && <KDMInfoText>{description}</KDMInfoText>}
+          </React.Fragment>
+        </KDMInfoHoverContainer>
+      </span>
+    );
+  };
+
   return (
     <Milestone $completed={completed}>
       <MilestoneTitle>
-        {milestoneLabels[index]}
+        {renderWithTooltip(milestone)}
         {completed ? (
           <CheckmarkIcon width={'9'} height={'8'} />
         ) : (

diff --git 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
@@ -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() {
@@ -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>
   );
 }
diff --git 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;
+  }
+`;