[feat] Info Hover Message for COD and KDMs #98

components/KeyDevelopmentMilestone/index.tsx

@@ -1,5 +1,11 @@
+import React from 'react';
 import { CheckmarkIcon, DotDotDotIcon } from '../../assets/KDM-Icons/icons';
-import { Milestone, MilestoneLabel } from './styles';
+import {
+  KDMInfoHoverContainer,
+  KDMInfoText,
+  Milestone,
+  MilestoneLabel,
+} from './styles';
 
 export default function KeyDevelopmentMilestone({
   completed,
@@ -19,6 +25,13 @@ export default function KeyDevelopmentMilestone({
     'IA tendered',
     'Operations begun',
   ];
+  // Abbreviation to full text mapping
+  const abbreviationMap: Record<string, string> = {
+    NYISO: 'New York Independent System Operator',
+    NYSERDA: 'New York State Energy Research and Development Authority',
+    IA: 'Interconnection Agreement',
+  };
+
   function getDate() {
     if (!date) return null;
     const res = new Date(date);
@@ -42,9 +55,35 @@ export default function KeyDevelopmentMilestone({
     statusLabel = 'Pending';
   }
 
+  const renderWithTooltip = (text: string) => {
+    // Find the abbreviation in the KDMs (ex. NYISO)
+    const abbreviation = Object.keys(abbreviationMap).find(abbr =>
+      text.includes(abbr),
+    );
+
+    // If an abbreviation is found, render it with a tooltip
+    if (abbreviation) {
+      const parts = text.split(abbreviation);
+      const fullText = abbreviationMap[abbreviation];
+
+      return (
+        <KDMInfoHoverContainer>
+          <React.Fragment>
+            {abbreviation}
+            <KDMInfoText>{fullText}</KDMInfoText>
+          </React.Fragment>
+          {parts[1]} {/* Text after the abbreviation */}
+        </KDMInfoHoverContainer>
+      );
+    }
+
+    // If no abbreviation is found, return plain text
+    return text;
+  };
+
   return (
     <Milestone completed={completed}>
-      {milestoneLabels[index]}
+      {renderWithTooltip(milestoneLabels[index])}
       <MilestoneLabel status={completed}>
         {completed ? <CheckmarkIcon /> : <DotDotDotIcon />}
         {statusLabel}

components/KeyDevelopmentMilestone/styles.ts

@@ -42,3 +42,43 @@ export const MilestoneLabel = styled.p<{ status: boolean }>`
   color: ${props =>
     props.status ? 'rgba(73, 116, 224, 0.45)' : 'rgba(46, 58, 89, 0.3)'};
 `;
+
+export const KDMInfoHoverContainer = styled.div`
+  position: relative;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.25rem;
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`;
+
+export const KDMInfoText = styled.div`
+  visibility: hidden;
+  width: auto;
+  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);
+  left: 50%;
+  transform: translateX(-70%);
+
+  /* Tooltip arrow */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0.625rem;
+    border-width: 0.313rem;
+    border-style: solid;
+    border-color: white transparent transparent transparent;
+  }
+`;

components/StatusTag/index.tsx

@@ -3,9 +3,11 @@ import {
   GreenDotOperationalIcon,
   GreyDotInProgressIcon,
 } from '../../assets/Status-Tag-Icons/icons';
-import { TagText1 } from '../../styles/texts';
+import { InfoHoverText, TagText1 } from '../../styles/texts';
 import {
   AllTagStyles,
+  CODInfoHoverContainer,
+  CODInfoText,
   CODTagStyles,
   ProposedCODTagStyles,
   StatusTagStyles,
@@ -42,8 +44,16 @@ export default function StatusTag({
           <GreyDotInProgressIcon /> <TagText1>Proposed</TagText1>
         </ProposedCODTagStyles>
         <CODTagStyles>
-          <CalendarIcon />
-          <TagText1>COD {convertDateToString()}</TagText1>
+          <CODInfoHoverContainer>
+            <CODInfoText>
+              <InfoHoverText>
+                COD stands for Commercial Operations Date. It is the predicted
+                date that this project will begin to produce electricity.
+              </InfoHoverText>
+            </CODInfoText>
+            <CalendarIcon />
+            <TagText1>COD {convertDateToString()}</TagText1>
+          </CODInfoHoverContainer>
         </CODTagStyles>
       </AllTagStyles>
     ) : (

components/StatusTag/styles.ts

@@ -32,3 +32,41 @@ export const AllTagStyles = styled(BaseTagStyles)`
   padding-left: 0rem;
   gap: 0.375rem;
 `;
+
+export const CODInfoHoverContainer = styled.div`
+  position: relative;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.25rem;
+  &:hover > div {
+    visibility: visible;
+    opacity: 1;
+  }
+`;
+
+export const CODInfoText = styled.div`
+  visibility: hidden;
+  width: 11.25rem;
+  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;
+  }
+`;

styles/texts.ts

@@ -243,6 +243,15 @@ export const ClearFiltersText = styled.p<TextProps>`
   color: ${COLORS.electricBlue};
 `;
 
+export const InfoHoverText = styled.p<TextProps>`
+  ${TextStylesCoinbaseText}
+  font-size: 0.625rem;
+  font-style: normal;
+  font-weight: 250;
+  line-height: 160%;
+  color: ${COLORS.navy};
+`;
+
 /*
 
 export const FilterFont = styled.h1`