@digital-ai/dot-illustrations 2.0.24 → 2.0.26

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);
   });
 }
 
@@ -156,10 +157,71 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // --- ILLUSTRATION DATA ---
   const globalList = [
-    "add-new","ai","add-new-grid","add-team","add-user","assets","analysis-circle","community","chart","custom-dashboards","dependency-down","dependency-up","disconnected","done","dora-metrics-circle","download","empty","error-fourhundredfour","error-fivehundred","error-fivehundredthree","error-fourhundredthree","favorite","features","folder-versioning","forbiden-access","filter-empty","launch","no-files","no-filters","nothing-defined","password-token","protection-in-progress","reports","scan-document","survey","user","ui-ux-improvements","upload","work-item","workflows-main","research","commitrepo"
+    "add-new",
+    "ai",
+    "add-new-grid",
+    "add-team",
+    "add-user",
+    "assets",
+    "analysis-circle",
+    "community",
+    "commitrepo",
+    "chart",
+    "custom-dashboards",
+    "dependency-down",
+    "dependency-up",
+    "disconnected",
+    "done",
+    "dora-metrics-circle",
+    "download",
+    "empty",
+    "error-fourhundredfour",
+    "error-fivehundred",
+    "error-fivehundredthree",
+    "error-fourhundredthree",
+    "favorite","features",
+    "folder-versioning",
+    "forbiden-access",
+    "filter-empty",
+    "launch",
+    "no-files",
+    "no-filters",
+    "nothing-defined",
+    "password-token",
+    "protection-in-progress",
+    "reports","scan-document",
+    "survey",
+    "time",
+    "user",
+    "ui-ux-improvements",
+    "upload","work-item",
+    "workflows-main",
+    "research"
   ];
   const dashboardsList = [
-    "analysis","automation","burn-down","burn-up","change-credit-score","change-data-quality","change-executive","change-impact-detection","change-impact-hotspots","change-failure-factors","change-failure-prediction","CRP-failure-prediction-monitoring","custom","defect","dependency","dora","executive","change-impact","item","late-task","onboarding","data-extraction","workflow"
+    "analysis",
+    "automation",
+    "burn-down",
+    "burn-up",
+    "change-credit-score",
+    "change-data-quality",
+    "change-executive",
+    "change-impact-detection",
+    "change-impact-hotspots",
+    "change-failure-factors",
+    "change-failure-prediction",
+    "CRP-failure-prediction-monitoring",
+    "custom",
+    "defect",
+    "dependency",
+    "dora",
+    "executive",
+    "change-impact",
+    "item",
+    "late-task",
+    "onboarding",
+    "data-extraction",
+    "workflow"
   ];
   const illustrations = [...globalList, ...dashboardsList, "my-new-illustration"];
 
@@ -199,7 +261,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');
@@ -219,11 +280,35 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     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>`;
-    modalIdInput.value = illustration;
+    // 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');
@@ -233,10 +318,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);
@@ -279,6 +360,8 @@ document.addEventListener('DOMContentLoaded', () => {
       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">
@@ -293,15 +376,15 @@ document.addEventListener('DOMContentLoaded', () => {
         </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="${svgPath}" class="${illustration} ${themeClass} ${categoryClass}"/></span></code></pre>
+        <pre class="codeBlock"><code class="codeBlock">${codeString}</code></pre>
       `;
       list.appendChild(div);
     });

package/illustrations/dark/global/time.svg

@@ -0,0 +1,27 @@
+<svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="124.019" cy="124.5" r="93" fill="#494F60" fill-opacity="0.3"/>
+<circle cx="30.5632" cy="167.808" r="3.19118" fill="#494F60" fill-opacity="0.3"/>
+<rect x="49.73" y="50.2109" width="148.578" height="148.578" rx="74.2891" fill="#3D465C"/>
+<rect x="58.019" y="58.5" width="132" height="132" rx="66" fill="#555F77"/>
+<g clip-path="url(#clip0_4440_5148)">
+<rect x="62.5068" y="64.082" width="123.389" height="123.389" rx="61.6946" fill="#252D40"/>
+<rect x="120.916" y="61.8945" width="6.57102" height="14.9673" rx="0.730114" fill="#8591AE"/>
+<rect x="189.181" y="123.59" width="6.57102" height="14.9673" rx="0.730114" transform="rotate(90 189.181 123.59)" fill="#8591AE"/>
+<rect x="120.916" y="176.883" width="6.57102" height="14.9673" rx="0.730114" fill="#8591AE"/>
+<rect x="74.1885" y="123.59" width="6.57102" height="14.9673" rx="0.730114" transform="rotate(90 74.1885 123.59)" fill="#8591AE"/>
+<rect x="81.4932" y="99.1797" width="5.84091" height="50.6592" rx="2.92045" transform="rotate(-54.7849 81.4932 99.1797)" fill="#AAB2C5"/>
+<rect x="140.172" y="100.812" width="5.84091" height="26.0643" rx="2.92045" transform="rotate(36.7803 140.172 100.812)" fill="#AAB2C5"/>
+<rect x="167.322" y="159.566" width="1.5513" height="53.2885" rx="0.775649" transform="rotate(128.345 167.322 159.566)" fill="#AAB2C5"/>
+<rect x="116.353" y="117.93" width="15.6974" height="15.6974" rx="7.84872" fill="#AAB2C5"/>
+<rect x="120.551" y="122.129" width="7.30114" height="7.30114" rx="3.65057" fill="#D6DCE8"/>
+</g>
+<circle cx="205.166" cy="47.9113" r="7.29412" fill="#494F60" fill-opacity="0.3"/>
+<circle cx="212.916" cy="31.9545" r="4.10294" fill="#494F60" fill-opacity="0.3"/>
+<circle cx="39.6809" cy="58.3982" r="3.19118" fill="#494F60" fill-opacity="0.3"/>
+<circle cx="30.5628" cy="193.338" r="6.83824" fill="#494F60" fill-opacity="0.3"/>
+<defs>
+<clipPath id="clip0_4440_5148">
+<rect x="62.5068" y="64.082" width="123.389" height="123.389" rx="61.6946" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/illustrations/light/global/time.svg

@@ -0,0 +1,27 @@
+<svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="124.438" cy="124.5" r="93" fill="#94A8E1" fill-opacity="0.2"/>
+<circle cx="30.9822" cy="167.808" r="3.19118" fill="#94A8E1" fill-opacity="0.2"/>
+<rect x="50.1489" y="50.2109" width="148.578" height="148.578" rx="74.2891" fill="#D6DCE8"/>
+<rect x="58.438" y="58.5" width="132" height="132" rx="66" fill="#CBD2E2"/>
+<g clip-path="url(#clip0_4440_5208)">
+<rect x="62.9258" y="64.082" width="123.389" height="123.389" rx="61.6946" fill="#F8F9FC"/>
+<rect x="121.335" y="61.8945" width="6.57102" height="14.9673" rx="0.730114" fill="#CBD2E2"/>
+<rect x="189.6" y="123.59" width="6.57102" height="14.9673" rx="0.730114" transform="rotate(90 189.6 123.59)" fill="#CBD2E2"/>
+<rect x="121.335" y="176.883" width="6.57102" height="14.9673" rx="0.730114" fill="#CBD2E2"/>
+<rect x="74.6074" y="123.59" width="6.57102" height="14.9673" rx="0.730114" transform="rotate(90 74.6074 123.59)" fill="#CBD2E2"/>
+<rect x="81.9121" y="99.1797" width="5.84091" height="50.6592" rx="2.92045" transform="rotate(-54.7849 81.9121 99.1797)" fill="#8591AE"/>
+<rect x="140.591" y="100.812" width="5.84091" height="26.0643" rx="2.92045" transform="rotate(36.7803 140.591 100.812)" fill="#8591AE"/>
+<rect x="167.741" y="159.566" width="1.5513" height="53.2885" rx="0.775649" transform="rotate(128.345 167.741 159.566)" fill="#8591AE"/>
+<rect x="116.771" y="117.93" width="15.6974" height="15.6974" rx="7.84872" fill="#8591AE"/>
+<rect x="120.97" y="122.129" width="7.30114" height="7.30114" rx="3.65057" fill="#F8F9FC"/>
+</g>
+<circle cx="205.585" cy="47.9113" r="7.29412" fill="#94A8E1" fill-opacity="0.2"/>
+<circle cx="213.335" cy="31.9545" r="4.10294" fill="#94A8E1" fill-opacity="0.2"/>
+<circle cx="40.0999" cy="58.3982" r="3.19118" fill="#94A8E1" fill-opacity="0.2"/>
+<circle cx="30.9818" cy="193.338" r="6.83824" fill="#94A8E1" fill-opacity="0.2"/>
+<defs>
+<clipPath id="clip0_4440_5208">
+<rect x="62.9258" y="64.082" width="123.389" height="123.389" rx="61.6946" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/index.css

@@ -2,6 +2,14 @@
 /*Path: --------- './illustrations/light/global/*.svg  ----- light */
 /*Path: --------- './illustrations/dark/global/*.svg  ------ dark */
 
+.dot-illustration img.time.light.global-illustration {
+    content: url('./illustrations/light/global/time.svg');
+}
+
+.dot-illustration img.time.dark.global-illustration {
+    content: url('./illustrations/dark/global/time.svg');
+}
+
 .dot-illustration img.forbiden-access.light.global-illustration {
     content: url('./illustrations/light/global/forbiden-access.svg');
 }

package/package.json

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