Feat/153 changelog

src/components/ChangelogSnippet/ChangelogCard.astro

@@ -2,12 +2,26 @@
 import { SvgTaillessArrowDownSmall, Typography } from "@chainlink/blocks"
 import styles from "./ChangelogCard.module.css"
 import type { ChangelogItem } from "./types"
+import { clsx } from "~/lib/clsx/clsx"
+import CopyButton from "./CopyButton.tsx"
 
 interface Props {
   item: ChangelogItem
+  showBorder?: boolean
+  autoExpand?: boolean
+  showCopyButton?: boolean
+  disableHover?: boolean
+  showNetworksAndTopic?: boolean
 }
 
-const { item } = Astro.props
+const {
+  item,
+  showBorder = true,
+  autoExpand = false,
+  showCopyButton = true,
+  disableHover = false,
+  showNetworksAndTopic = false,
+} = Astro.props
 
 // Format the date
 const formatDate = (dateString: string) => {
@@ -22,20 +36,34 @@ const formatDate = (dateString: string) => {
 const formattedDate = formatDate(item["date-of-release"])
 ---
 
-<div class={styles.cardWrapper} data-expandable="wrapper">
+<div
+  class={clsx(styles.cardWrapper, showBorder && styles.withBorder)}
+  data-expandable="wrapper"
+  data-auto-expand={autoExpand}
+  data-disable-hover={disableHover}
+>
   <div class={styles.card} data-expandable="card">
     <div class={styles.header}>
       <div class={styles.metaSection}>
-        <Typography variant="body-semi">
+        <Typography variant="body-semi" className={styles.changelogType}>
           {item.type}
         </Typography>
-        <Typography variant="body-s" color="muted">
+        <Typography variant="body-s" color="muted" className={styles.date}>
           {formattedDate}
         </Typography>
       </div>
     </div>
 
     <div class={styles.content} data-expandable="content">
+      {
+        showNetworksAndTopic && (item.networks || item.topic) && (
+          <div class={styles.networksAndTopicSection}>
+            {item.networks && <div set:html={item.networks} />}
+            {item.topic && <span class="prod-chip">{item.topic}</span>}
+          </div>
+        )
+      }
+
       <Typography
         variant="h6"
         style={{
@@ -46,9 +74,11 @@ const formattedDate = formatDate(item["date-of-release"])
       </Typography>
 
       <div class={styles.descriptionContent}>
-        {item["text-description"] && <div class="description" set:html={item["text-description"]} />}
+        {item["text-description"] && <div class={styles.description} set:html={item["text-description"]} />}
       </div>
     </div>
+
+    {showCopyButton && <CopyButton client:only="react" url={item.slug} />}
   </div>
 
   <div class={styles.contentFooter} data-expandable="footer">
@@ -112,6 +142,18 @@ const formattedDate = formatDate(item["date-of-release"])
 
       if (!card || !content || !button) return
 
+      // Check if auto-expand is enabled
+      const autoExpand = (wrapper as HTMLElement).dataset.autoExpand === "true"
+
+      if (autoExpand) {
+        // Auto-expand: set to full height and hide footer
+        ;(wrapper as HTMLElement).style.maxHeight = "none"
+        wrapper.classList.add("expanded")
+        footer.style.opacity = "0"
+        footer.style.pointerEvents = "none"
+        return // Skip the rest of the logic
+      }
+
       // Wait for images to load before checking height
       const images = card.querySelectorAll("img")
       let loadedImages = 0
@@ -283,13 +325,12 @@ const formattedDate = formatDate(item["date-of-release"])
   .log-item__list-chains {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-1x);
   }
 
   .log-item__img-chain {
     width: 24px;
     height: 24px;
-    border-radius: 50%;
     object-fit: cover;
   }
 
@@ -299,15 +340,44 @@ const formattedDate = formatDate(item["date-of-release"])
     justify-content: center;
     width: 24px;
     height: 24px;
-    border-radius: 50%;
-    background-color: var(--muted);
+    background-color: var(--gray-950);
     font-size: 10px;
     font-weight: 600;
-    color: var(--color-text-secondary);
+    color: var(--white);
+    border-radius: 3px;
   }
 
   /* Hidden filter elements */
   .log-item__list-chains .hidden {
     display: none;
   }
+
+  /* Disable hover effects when data-disable-hover is true */
+  [data-disable-hover="true"]:hover {
+    background-color: transparent !important;
+  }
+
+  [data-disable-hover="true"]:hover .copyButton {
+    opacity: 0 !important;
+  }
+
+  [data-disable-hover="true"].withBorder:hover {
+    background-color: transparent !important;
+  }
+
+  [data-disable-hover="true"].withBorder:hover .contentFooter {
+    background: none !important;
+  }
+
+  /* Product Chip */
+  .prod-chip {
+    background-color: var(--muted-more);
+    color: var(--mirage);
+    border-radius: 4px;
+    margin-bottom: 0;
+    padding: var(--space-1x) var(--space-2x);
+    font-size: 12px;
+    line-height: 16px;
+    display: inline-block;
+  }
 </style>

src/components/ChangelogSnippet/ChangelogCard.module.css

@@ -1,27 +1,58 @@
-/* Card Wrapper */
+/* Card Wrapper used in Changelog page */
 .cardWrapper {
   max-height: 400px;
   overflow: hidden;
-  transition: max-height 0.5s ease;
+  transition: all 0.5s ease;
   position: relative;
+
+  &:hover {
+    background-color: var(--gray-50);
+  }
+
+  &:hover .copyButton {
+    opacity: 1;
+  }
+
+  & .card {
+    padding: var(--space-4x);
+  }
+}
+
+/* Used on individual pages like CCIP/DataFeeds */
+.cardWrapper.withBorder {
   border: 1px solid var(--border);
+
+  &:hover {
+    background-color: var(--muted);
+  }
+}
+
+/* Disable hover background when disableHover is true */
+.cardWrapper[data-disable-hover="true"]:hover {
+  background-color: transparent !important;
+}
+
+.cardWrapper.withBorder[data-disable-hover="true"]:hover {
+  background-color: transparent !important;
+}
+
+/* Remove padding when disableHover is true */
+.cardWrapper[data-disable-hover="true"] .card {
+  padding: 0 !important;
 }
 
 /* Card Container */
 .card {
   display: flex;
   gap: 82px;
-  padding: var(--space-6x);
 }
 
-.cardWrapper.expanded .card {
+.cardWrapper.withBorder.expanded .card {
   -webkit-mask-image: none;
   mask-image: none;
 }
 
-.cardWrapper:hover {
-  background-color: var(--muted);
-
+.cardWrapper.withBorder:hover {
   & .contentFooter {
     background: linear-gradient(to top, var(--muted) 50%, transparent);
   }
@@ -54,11 +85,11 @@
 
 .description p {
   margin: 0;
-  color: var(--foreground);
+  color: var(--muted-foreground);
 }
 
 .description a {
-  color: var(--color-blue-600);
+  color: var(--link);
   text-decoration: none;
 }
 
@@ -68,7 +99,7 @@
 
 .header {
   display: flex;
-  width: 150px;
+  width: 160px;
 }
 
 .content {
@@ -82,6 +113,15 @@
   flex: 1;
 }
 
+/* Networks and Topic Section */
+.networksAndTopicSection {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
+  margin-bottom: var(--space-4x);
+  flex-wrap: wrap;
+}
+
 /* Content Footer */
 .contentFooter {
   position: absolute;
@@ -119,16 +159,58 @@
   transition: transform 0.3s ease;
 }
 
-@media (max-width: 768px) {
+.copyButton {
+  display: flex;
+  height: fit-content;
+  gap: var(--space-2x);
+  border-radius: var(--space-1x);
+  border: 1px solid var(--border);
+  width: 118px;
+  justify-content: center;
+  align-items: center;
+  padding: var(--space-2x) 0;
+  transition: all 0.2s ease;
+  opacity: 0;
+
+  & > svg {
+    color: var(--muted-foreground);
+  }
+
+  &:hover {
+    border: 1px solid var(--foreground);
+  }
+}
+
+.checkmark {
+  stroke: var(--success-foreground);
+}
+.copyIconMobile {
+  display: none;
+}
+
+.copyIconDesktop {
+  display: block;
+}
+
+@media screen and (max-width: 425px) {
+  .changelogType {
+    font-size: 14px;
+  }
+
+  .metaSection {
+    gap: 0 !important;
+  }
+}
+
+@media screen and (max-width: 768px) {
   .card {
-    padding: var(--space-4x);
+    padding: 0 !important;
+    gap: 0;
     flex-direction: column;
-    gap: var(--space-4x);
   }
 
   .header {
     gap: var(--space-3x);
-    width: 100%;
   }
 
   .metaSection {
@@ -147,4 +229,28 @@
   .contentFooter {
     padding-left: var(--space-4x);
   }
+
+  .copyIconDesktop {
+    display: none;
+  }
+
+  .copyIconMobile {
+    display: block;
+  }
+  .copyText {
+    display: none;
+  }
+
+  .copyButton {
+    width: 32px;
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 990px) {
+  .copyButton {
+    position: absolute;
+    right: var(--space-4x);
+    top: var(--space-4x);
+  }
 }

src/components/ChangelogSnippet/ChangelogSnippet.astro

@@ -55,7 +55,7 @@ if (appId && apiKey) {
           Changelog
         </Typography>
 
-        <a href="https://dev.chain.link/changelog" class={styles.arrow}>
+        <a href="/changelog" class={styles.arrow}>
           <SvgArrowRight2 height={12} width={12} />
         </a>
       </header>