From f9ce2fffc3e6cd473f38babb79a6b1e426821827 Mon Sep 17 00:00:00 2001
From: Chen Hui Jing <1461498+huijing@users.noreply.github.com>
Date: Wed, 9 Jul 2025 11:21:56 +0300
Subject: [PATCH] add label props to mermaidwrapper and largeimg

---
 package.json                        | 2 +-
 src/components/LargeImg.astro       | 4 ++--
 src/components/Mermaid.astro        | 1 -
 src/components/MermaidWrapper.astro | 6 +++---
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 4624bfe..66cefff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {
diff --git a/src/components/LargeImg.astro b/src/components/LargeImg.astro
index 1bfe103..d7daeb3 100644
--- a/src/components/LargeImg.astro
+++ b/src/components/LargeImg.astro
@@ -1,5 +1,5 @@
 ---
-const { src, alt, hasBorder = true } = Astro.props;
+const { src, alt, hasBorder = true, viewLabel="View full image" } = Astro.props;
 ---
 <div>
   {hasBorder ? <img src={src} alt={alt} class="border" /> : <img src={src} alt={alt} />}
@@ -8,7 +8,7 @@ const { src, alt, hasBorder = true } = Astro.props;
     target='_blank'
     rel='noopener noreferrer'
   >
-    View full image
+    {viewLabel}
   </a>
 </div>
 
diff --git a/src/components/Mermaid.astro b/src/components/Mermaid.astro
index 51e8252..cafba94 100644
--- a/src/components/Mermaid.astro
+++ b/src/components/Mermaid.astro
@@ -8,7 +8,6 @@ const { graph, hasBorder = false } = Astro.props;
 
 {hasBorder ? <pre class="mermaid border" set:html={graph} /> : <pre class="mermaid" set:html={graph} />}
 
-
 <style>
   pre.mermaid.mermaid {
     background-color: transparent;
diff --git a/src/components/MermaidWrapper.astro b/src/components/MermaidWrapper.astro
index eea7dc7..62698ca 100644
--- a/src/components/MermaidWrapper.astro
+++ b/src/components/MermaidWrapper.astro
@@ -1,5 +1,5 @@
 ---
-const { hasBorder = true, diagramName="diagram" } = Astro.props;
+const { hasBorder = true, diagramName="diagram", viewLabel="View full diagram", downloadLabel="Download diagram" } = Astro.props;
 ---
 <div>
   {hasBorder ? 
@@ -7,11 +7,11 @@ const { hasBorder = true, diagramName="diagram" } = Astro.props;
     <div class="not-content"><slot /></div>
   }
   <button data-mermaid-view class="button">
-    <span>View full diagram</span>
+    <span>{viewLabel}</span>
   </button>
 
   <button data-mermaid-download={diagramName} class="button">
-    <span>Download diagram</span>
+    <span>{downloadLabel}</span>
   </button>
 </div>