Merge pull request #48 from interledger/chj/add-custom-label-options

featL: add label props to MermaidWrapper and LargeImg

Author: huijing

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": {

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>
 

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;

src/components/MermaidWrapper.astro

@@ -1,17 +1,17 @@
 ---
-const { hasBorder = true, diagramName="diagram" } = Astro.props;
+const { hasBorder = true, diagramName="diagram", viewLabel="View full diagram", downloadLabel="Download diagram" } = Astro.props;
 ---
 <div>
   {hasBorder ? 
     <div class="not-content border mermaid-wrapper"><slot /></div> : 
     <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>