Feat/155 changelog item page

src/components/ChangelogSnippet/ChangelogCard.astro

@@ -3,13 +3,17 @@ 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
 }
 
-const { item, showBorder = true } = Astro.props
+const { item, showBorder = true, autoExpand = false, showCopyButton = true, disableHover = false } = Astro.props
 
 // Format the date
 const formatDate = (dateString: string) => {
@@ -24,7 +28,12 @@ const formatDate = (dateString: string) => {
 const formattedDate = formatDate(item["date-of-release"])
 ---
 
-<div class={clsx(styles.cardWrapper, showBorder && styles.withBorder)} 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}>
@@ -51,6 +60,8 @@ const formattedDate = formatDate(item["date-of-release"])
         {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">
@@ -114,6 +125,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
@@ -312,4 +335,21 @@ const formattedDate = formatDate(item["date-of-release"])
   .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;
+  }
 </style>

src/components/ChangelogSnippet/ChangelogCard.module.css

@@ -9,6 +9,10 @@
     background-color: var(--gray-50);
   }
 
+  &:hover .copyButton {
+    opacity: 1;
+  }
+
   & .card {
     padding: var(--space-6x);
   }
@@ -132,11 +136,40 @@
   transition: transform 0.3s ease;
 }
 
-@media screen and (max-width: 425px) {
-  .card {
-    flex-direction: column;
+.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;
   }
@@ -150,6 +183,7 @@
   .card {
     padding: var(--space-4x);
     gap: var(--space-4x);
+    flex-direction: column;
   }
 
   .header {
@@ -172,4 +206,27 @@
   .contentFooter {
     padding-left: var(--space-4x);
   }
+
+  .copyIconDesktop {
+    display: none;
+  }
+
+  .copyIconMobile {
+    display: block;
+  }
+  .copyText {
+    display: none;
+  }
+
+  .copyButton {
+    width: 32px;
+  }
+}
+
+@media screen and (max-width: 990px) {
+  .copyButton {
+    position: absolute;
+    right: var(--space-4x);
+    top: var(--space-4x);
+  }
 }

src/components/ChangelogSnippet/CopyButton.tsx

@@ -0,0 +1,68 @@
+import { SvgCopy, Typography } from "@chainlink/blocks"
+import styles from "./ChangelogCard.module.css"
+import { useState } from "react"
+
+export default function CopyButton({ url }: { url: string }) {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyToClipboard = () => {
+    const mode = import.meta.env.MODE === "development" ? "http://localhost:4321" : "https://dev.chain.link"
+    navigator.clipboard.writeText(`${mode}/changelog/${url}`)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  return (
+    <button className={styles.copyButton} onClick={copyToClipboard}>
+      {isCopied ? (
+        <>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            className={styles.checkmark}
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+          <Typography color="success" variant="body-xs" className={styles.copyText}>
+            Copied
+          </Typography>
+        </>
+      ) : (
+        <>
+          <SvgCopy
+            style={{
+              width: "13px",
+              height: "12px",
+            }}
+            className={styles.copyIconDesktop}
+          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            className={styles.copyIconMobile}
+          >
+            <path d="M12 3v12" />
+            <path d="m17 8-5-5-5 5" />
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          </svg>
+          <Typography color="muted" variant="body-xs" className={styles.copyText}>
+            Copy URL
+          </Typography>
+        </>
+      )}
+    </button>
+  )
+}

src/components/ChangelogSnippet/README.md

@@ -40,3 +40,54 @@ import ChangelogSnippet from "@components/ChangelogSnippet/ChangelogSnippet.astr
 ```
 
 This will display the latest CCIP-related changelog entry with a link to view the full changelog.
+
+---
+
+# ChangelogCard Component
+
+## What This Component Does
+
+The ChangelogCard component displays a single changelog item in a card format. It shows the changelog entry's type, date, title, and description with optional expand/collapse functionality.
+
+## How to Use It
+
+Import the component and pass a changelog item:
+
+```astro
+import ChangelogCard from "@components/ChangelogSnippet/ChangelogCard.astro" import type {ChangelogItem} from "@components/ChangelogSnippet/types"
+const item: ChangelogItem = {
+  // ... changelog item data
+}
+
+<ChangelogCard item={item} />
+```
+
+## Props
+
+| Prop             | Type          | Required | Default | Description                                                                                                          |
+| ---------------- | ------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
+| `item`           | ChangelogItem | Yes      | -       | The changelog item to display                                                                                        |
+| `showBorder`     | boolean       | No       | `true`  | Whether to show a border around the card                                                                             |
+| `autoExpand`     | boolean       | No       | `false` | Whether to automatically expand the card to full height (skips height restrictions and hides expand/collapse button) |
+| `showCopyButton` | boolean       | No       | `true`  | Whether to show the "Copy URL" button                                                                                |
+| `disableHover`   | boolean       | No       | `false` | Whether to disable hover effects (background color change)                                                           |
+
+## Usage Examples
+
+### Default Card (with border and interactions)
+
+```astro
+<ChangelogCard item={changelogItem} />
+```
+
+### Card without border (like on main changelog page)
+
+```astro
+<ChangelogCard item={changelogItem} showBorder={false} />
+```
+
+### Fully expanded card without interactions (like on individual pages)
+
+```astro
+<ChangelogCard item={changelogItem} showBorder={false} autoExpand={true} showCopyButton={false} disableHover={true} />
+```