@digital-ai/dot-illustrations 2.0.23 → 2.0.25

package/demo/index.html

@@ -66,15 +66,17 @@
         <h2 class="text-xl font-semibold mb-4 w-full text-center text-gray-900 dark:text-gray-100">Illustration preview</h2>
         <div id="modal-image" class="mb-4"></div>
         <div class="w-full flex flex-col gap-2 mb-2">
-          <label class="text-xs font-medium text-gray-500 dark:text-gray-400" for="modal-id-input">Image ID</label>
+          <div class="text-base font-semibold text-center text-gray-800 dark:text-gray-100 mb-1" id="modal-illustration-name"></div>
+        </div>
+        <div class="w-full flex flex-col gap-2 mb-2">
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400" for="modal-dot-code">Dot Code</label>
           <div class="flex flex-row items-center gap-2">
-            <input id="modal-id-input" class="flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-base font-mono" readonly />
-            <button id="modal-copy-id" class="button flex items-center justify-center px-2 py-1 text-xs text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center">Copy ID</button>
+            <textarea id="modal-dot-code" class="flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-xs font-mono resize-none" rows="2" readonly></textarea>
+            <button id="modal-copy-dot-code" class="button flex items-center justify-center px-2 py-1 text-xs text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" title="Copy Dot Code">Copy Dot Code</button>
           </div>
         </div>
-        <div id="modal-description" class="w-full text-center text-sm text-gray-700 dark:text-gray-300 mb-4"></div>
         <div class="w-full flex flex-col gap-2 mb-2">
-          <label class="text-xs font-medium text-gray-500 dark:text-gray-400" for="modal-code">Code</label>
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400" for="modal-code">HTML Code</label>
           <div class="flex flex-row items-center gap-2">
             <textarea id="modal-code" class="flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-xs font-mono resize-none" rows="2" readonly></textarea>
             <button id="modal-copy-code" class="button flex items-center justify-center px-2 py-1 text-xs text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center">Copy Code</button>

package/demo/script.js

@@ -70,18 +70,19 @@ const origCopyText = window.copyText;
 window.copyText = function(button) {
   var parentDiv = button.closest('.copy-container');
   var copyText = parentDiv.querySelector('.iconID');
-  var textToCopy = copyText.textContent;
-  navigator.clipboard.writeText(textToCopy).then(function() {
+  var illustrationId = copyText.textContent;
+  var dotCode = `<DotIllustration illustrationId=\"${illustrationId}\" />`;
+  navigator.clipboard.writeText(dotCode).then(function() {
     var tooltip = button.querySelector('.tooltiptext');
-    tooltip.innerHTML = "Copied: " + textToCopy;
+    tooltip.innerHTML = "Copied Dot Code";
     tooltip.style.visibility = 'visible';
     setTimeout(function() {
-      tooltip.innerHTML = "Copy ID";
+      tooltip.innerHTML = "Copy Dot Code";
       tooltip.style.visibility = 'hidden';
     }, 2000);
-    showToast('Copied ID: ' + textToCopy);
+    showToast('Copied Dot Code: ' + dotCode);
   }, function(err) {
-    console.error('Failed to copy text: ', err);
+    console.error('Failed to copy dot code: ', err);
   });
 }
 
@@ -109,6 +110,7 @@ document.addEventListener('DOMContentLoaded', () => {
   localStorage.setItem('theme', 'light');
   themeToggle.addEventListener('click', () => {
     setTheme(!root.classList.contains('dark'));
+    renderIllustrations();
   });
 
   // --- TABS ---
@@ -198,7 +200,6 @@ document.addEventListener('DOMContentLoaded', () => {
   const modalIdInput = document.getElementById('modal-id-input');
   const modalDescription = document.getElementById('modal-description');
   const modalCode = document.getElementById('modal-code');
-  const modalCopyId = document.getElementById('modal-copy-id');
   const modalCopyCode = document.getElementById('modal-copy-code');
   const modalClose = document.getElementById('modal-close');
   const modalCloseBottom = document.getElementById('modal-close-bottom');
@@ -208,14 +209,45 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!descriptionsLoaded) return;
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
     let categoryClass = "";
-    if (globalList.includes(illustration)) categoryClass = "global-illustration";
-    else if (dashboardsList.includes(illustration)) categoryClass = "dashboards-illustration";
-    modalImage.innerHTML = `<span class=\"dot-illustration\"><img src=\"svgs/${illustration}.svg\" class=\"${illustration} ${themeClass} ${categoryClass}\" style=\"width:286px;height:286px;object-fit:contain;\"/></span>`;
-    modalIdInput.value = illustration;
-    const codeString = `<span class=\"dot-illustration\"><img src=\"svgs/${illustration}.svg\" class=\"${illustration} ${themeClass} ${categoryClass}\"/></span>`;
+    let categoryFolder = "";
+    if (globalList.includes(illustration)) {
+      categoryClass = "global-illustration";
+      categoryFolder = "global";
+    } else if (dashboardsList.includes(illustration)) {
+      categoryClass = "dashboards-illustration";
+      categoryFolder = "dashboards";
+    }
+    const svgPath = `illustrations/${themeClass}/${categoryFolder}/${illustration}.svg`;
+    modalImage.innerHTML = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass} ${categoryClass}\" style=\"width:286px;height:286px;object-fit:contain;\"/></span>`;
+    // Set the illustration name
+    const modalIllustrationName = document.getElementById('modal-illustration-name');
+    if (modalIllustrationName) modalIllustrationName.textContent = illustration;
+    // Set the Dot Code textarea value
+    const dotCodeString = `<DotIllustration illustrationId=\"${illustration}\" />`;
+    const modalDotCode = document.getElementById('modal-dot-code');
+    if (modalDotCode) modalDotCode.value = dotCodeString;
+    // Show the HTML code snippet in the modal
+    const codeString = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass} ${categoryClass}\"/></span>`;
     modalCode.value = codeString;
     modal.classList.add('active');
     modal.classList.remove('hidden');
+    // Attach Copy Dot Code button event listener each time modal opens
+    const modalCopyDotCode = document.getElementById('modal-copy-dot-code');
+    if (modalCopyDotCode) {
+      modalCopyDotCode.onclick = function() {
+        if (modalDotCode) {
+          navigator.clipboard.writeText(modalDotCode.value).then(function() {
+            modalCopyDotCode.textContent = 'Copied!';
+            showToast('Copied Dot Code: ' + modalDotCode.value);
+            setTimeout(() => {
+              modalCopyDotCode.textContent = 'Copy Dot Code';
+            }, 2000);
+          }, function(err) {
+            console.error('Failed to copy dot code: ', err);
+          });
+        }
+      };
+    }
   }
   function closeModal() {
     modal.classList.remove('active');
@@ -225,10 +257,6 @@ document.addEventListener('DOMContentLoaded', () => {
   modalCloseBottom.addEventListener('click', closeModal);
   modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
   document.addEventListener('keydown', (e) => { if (modal.classList.contains('active') && e.key === 'Escape') closeModal(); });
-  modalCopyId.addEventListener('click', () => {
-    navigator.clipboard.writeText(modalIdInput.value);
-    showToast('Copied ID: ' + modalIdInput.value);
-  });
   modalCopyCode.addEventListener('click', () => {
     navigator.clipboard.writeText(modalCode.value);
     showToast('Copied code: ' + modalCode.value);
@@ -259,11 +287,20 @@ document.addEventListener('DOMContentLoaded', () => {
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
     toShow.forEach(illustration => {
       let categoryClass = "";
-      if (globalList.includes(illustration)) categoryClass = "global-illustration";
-      else if (dashboardsList.includes(illustration)) categoryClass = "dashboards-illustration";
+      let categoryFolder = "";
+      if (globalList.includes(illustration)) {
+        categoryClass = "global-illustration";
+        categoryFolder = "global";
+      } else if (dashboardsList.includes(illustration)) {
+        categoryClass = "dashboards-illustration";
+        categoryFolder = "dashboards";
+      }
+      const svgPath = `illustrations/${themeClass}/${categoryFolder}/${illustration}.svg`;
       const isFav = favs.includes(illustration);
       const div = document.createElement("div");
       div.setAttribute("class", "copy-container relative group flex flex-col items-center justify-between bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-2 md:p-3 transition-transform duration-200 hover:scale-105 hover:shadow-2xl h-[302px] w-full justify-center");
+      // Show the HTML code snippet in the card
+      const codeString = `<span class=\"dot-illustration\"><img src=\"${svgPath}\" class=\"${illustration} ${themeClass} ${categoryClass}\"/></span>`;
       div.innerHTML = `
         <button class="absolute top-2 right-2 z-10 p-1 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-yellow-100 dark:hover:bg-yellow-300 transition" title="Toggle favourite" onclick="event.stopPropagation(); window.toggleFavourite && window.toggleFavourite('${illustration}')">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="${isFav ? 'gold' : 'none'}" viewBox="0 0 24 24" stroke="gold">
@@ -272,21 +309,21 @@ document.addEventListener('DOMContentLoaded', () => {
         </button>
         <div class="flex-1 flex flex-col justify-center items-center">
           <span class="dot-illustration">
-            <img src="svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/>
+            <img src="${svgPath}" class="${illustration} ${themeClass} ${categoryClass}"/>
           </span>
           <span class="iconID block text-center text-base font-medium text-gray-800 dark:text-gray-200 my-2">${illustration}</span>
         </div>
         <div class="button-group flex flex-row items-center justify-center gap-2 mt-2">
           <button id="CopyID" class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyText(this)">
-            Copy ID
-            <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy ID</span>
+            Copy Dot Code
+            <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Dot Code</span>
           </button>
           <button class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyCode(this)">
             Copy Code
             <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Code</span>
           </button>
         </div>
-        <pre class="codeBlock"><code class="codeBlock"><span class="dot-illustration"><img src="svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/></span></code></pre>
+        <pre class="codeBlock"><code class="codeBlock">${codeString}</code></pre>
       `;
       list.appendChild(div);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-illustrations",
-  "version": "2.0.23",
+  "version": "2.0.25",
   "description": "A central place for the design team to keep illustrations and for dev teams to find them.",
   "main": "./index.css",
   "scripts": {