@digital-ai/dot-illustrations 2.0.21 → 2.0.23

package/demo/demo.css

@@ -7,68 +7,6 @@ body {
   margin: 0 auto;
   height: 100%;
   text-align: center;
-  overflow-y: hidden;
-}
-
-.search-wrapper {
-  border-radius: 4px;
-  border: #878f9a 1px solid;
-  top: 0;
-  background-color: #fff;
-  z-index: 999;
-  display: flex;
-  width: 720px;
-  height: 48px;
-  flex-direction: column;
-  margin: 24px auto;
-  gap: 4px;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-input {
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.demo-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 2.5rem;
-  justify-content: center;
-  width: 100vw;
-  height: calc(100vh - 200px);
-  overflow-y: auto;
-  padding-bottom: 200px;
-  align-content: flex-start;
-}
-
-.demo-wrapper > div {
-  z-index: 1;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-  width: 220px;
-  height: 240px;
-  min-width: 220px;
-  max-width: 460px;
-  max-height: 520px;
-  min-height: 220px;
-  overflow: hidden;
-  background: #fff;
-  margin: 16px;
-  padding: 24px;
-  border: solid 1px #e1e5eb;
-  border-radius: 4px;
-  transition: opacity 0.3s ease;
-  /* DropShadow/dropshadow-normal */
-  box-shadow: 0px 8px 16px 0px rgba(59, 72, 92, 0.16);
-  position: relative;
-}
-
-.demo-wrapper > div:hover {
-  opacity: 0.7;
-  background: var(--Overlay-colors-default-overlay, #3B485C);
-  z-index: 2;
 }
 
 img {
@@ -94,41 +32,9 @@ span {
   z-index: 0;
 }
 
-
 .copy-container{}
 
-/* Align buttons vertically in the nested div */
-.demo-wrapper .button-group {
-  display: flex;
-  flex-direction: column; /* Stack buttons vertically */
-  align-items: center; /* Center buttons horizontally */
-  gap: 8px; /* Add spacing between the buttons */
-  margin-top: -102px;
-  margin-bottom: 24px;
-}
-
-.button {
-  position: relative; /* Make tooltip positioning relative to button */
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  border: solid 1px #667385;
-  border-radius: 4px;
-  background: #FFF;
-  color: rgb(43, 50, 55);
-  cursor: pointer;
-  font-size: 16px;
-  padding: 8px 16px;
-  z-index: 29;
-}
-
-.demo-wrapper div:hover .button {
-  opacity: 1;
-}
-
-.demo-wrapper div:hover img {
-  opacity: 0.5;
-}
-
+/* Tooltip for copy buttons */
 .tooltiptext {
   visibility: hidden;
   background-color: black;
@@ -138,12 +44,12 @@ span {
   padding: 5px;
   position: absolute;
   z-index: 1;
-  bottom: 125%; /* Position the tooltip above the button */
+  bottom: 125%;
   left: 50%;
   transform: translateX(-50%);
   opacity: 0;
   transition: opacity 0.3s;
-  white-space: nowrap; /* Prevent text wrapping */
+  white-space: nowrap;
 }
 
 .button:hover .tooltiptext {
@@ -151,27 +57,26 @@ span {
   opacity: 1;
 }
 
-
 .codeBlock {
   visibility: hidden;
-  white-space: pre-wrap; /* Preserve code formatting */
+  white-space: pre-wrap;
   background-color: #f4f4f4;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 5px;
-  max-width: 300px; /* Optional: limit code block width */
-  overflow: auto; /* Scroll if content is too wide */
+  max-width: 300px;
+  overflow: auto;
 }
 
 .codeInclude {
   color: rgb(43, 50, 55);
-  white-space: pre-wrap; /* Preserve code formatting */
+  white-space: pre-wrap;
   background-color: #f4f4f4;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 5px;
-  max-width: 300px; /* Optional: limit code block width */
-  overflow: auto; /* Scroll if content is too wide */
+  max-width: 300px;
+  overflow: auto;
 }
 
 /* When dark mode is active */
@@ -183,5 +88,94 @@ body.dark-mode .dot-illustration img.dark {
   display: block;
   background-color: #232E40;
   border-radius: 8px;
+}
+
+#floating-bar {
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-100%);
+}
+#floating-bar.floating-bar-visible {
+  pointer-events: auto;
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1);
+}
+.floating-search {
+  min-width: 0;
+  width: 120px;
+  max-width: 200px;
+}
+@media (min-width: 640px) {
+  .floating-search {
+    width: 200px;
+    max-width: 320px;
+  }
+}
+.floating-tab {
+  min-width: 60px;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.85rem;
+}
 
+/* Modal styles */
+#illustration-modal {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.5);
+}
+#illustration-modal.active {
+  display: flex;
+}
+#illustration-modal .modal-content {
+  background: white;
+  border-radius: 1rem;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: 2rem;
+  position: relative;
+}
+#illustration-modal .modal-image img {
+  width: 220px;
+  height: 220px;
+  object-fit: contain;
+  border-radius: 0.75rem;
+  background: #f3f4f6;
+  margin-bottom: 1rem;
+}
+#illustration-modal .iconID {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+#illustration-modal .button-group {
+  margin-bottom: 1rem;
+}
+#illustration-modal #modal-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #aaa;
+  cursor: pointer;
+  z-index: 10;
+  transition: color 0.2s;
+}
+#illustration-modal #modal-close:hover {
+  color: #333;
+}
+@media (max-width: 600px) {
+  #illustration-modal .modal-content {
+    padding: 1rem;
+    max-width: 98vw;
+  }
+  #illustration-modal .modal-image img {
+    width: 140px;
+    height: 140px;
+  }
 }

package/demo/descriptions.json

@@ -0,0 +1,67 @@
+{
+    "add-new": "This is the add-new illustration.",
+    "ai": "This is the ai illustration.",
+    "add-new-grid": "This is the add-new-grid illustration.",
+    "add-team": "This is the add-team illustration.",
+    "add-user": "This is the add-user illustration.",
+    "assets": "This is the assets illustration.",
+    "analysis-circle": "This is the analysis-circle illustration.",
+    "community": "This is the community illustration.",
+    "chart": "This is the chart illustration.",
+    "custom-dashboards": "This is the custom-dashboards illustration.",
+    "dependency-down": "This is the dependency-down illustration.",
+    "dependency-up": "This is the dependency-up illustration.",
+    "disconnected": "This is the disconnected illustration.",
+    "done": "This is the done illustration.",
+    "dora-metrics-circle": "This is the dora-metrics-circle illustration.",
+    "download": "This is the download illustration.",
+    "empty": "This is the empty illustration.",
+    "error-fourhundredfour": "This is the error-fourhundredfour illustration.",
+    "error-fivehundred": "This is the error-fivehundred illustration.",
+    "error-fivehundredthree": "This is the error-fivehundredthree illustration.",
+    "error-fourhundredthree": "This is the error-fourhundredthree illustration.",
+    "favorite": "This is the favorite illustration.",
+    "features": "This is the features illustration.",
+    "folder-versioning": "This is the folder-versioning illustration.",
+    "forbiden-access": "This is the forbiden-access illustration.",
+    "filter-empty": "This is the filter-empty illustration.",
+    "launch": "This is the launch illustration.",
+    "no-files": "This is the no-files illustration.",
+    "no-filters": "This is the no-filters illustration.",
+    "nothing-defined": "This is the nothing-defined illustration.",
+    "password-token": "This is the password-token illustration.",
+    "protection-in-progress": "This is the protection-in-progress illustration.",
+    "reports": "This is the reports illustration.",
+    "scan-document": "This is the scan-document illustration.",
+    "survey": "This is the survey illustration.",
+    "user": "This is the user illustration.",
+    "ui-ux-improvements": "This is the ui-ux-improvements illustration.",
+    "upload": "This is the upload illustration.",
+    "work-item": "This is the work-item illustration.",
+    "workflows-main": "This is the workflows-main illustration.",
+    "research": "This is the research illustration.",
+    "commitrepo": "This is the commitrepo illustration.",
+    "analysis": "This is the analysis illustration.",
+    "automation": "This is the automation illustration.",
+    "burn-down": "This is the burn-down illustration.",
+    "burn-up": "This is the burn-up illustration.",
+    "change-credit-score": "This is the change-credit-score illustration.",
+    "change-data-quality": "This is the change-data-quality illustration.",
+    "change-executive": "This is the change-executive illustration.",
+    "change-impact-detection": "This is the change-impact-detection illustration.",
+    "change-impact-hotspots": "This is the change-impact-hotspots illustration.",
+    "change-failure-factors": "This is the change-failure-factors illustration.",
+    "change-failure-prediction": "This is the change-failure-prediction illustration.",
+    "CRP-failure-prediction-monitoring": "This is the CRP-failure-prediction-monitoring illustration.",
+    "custom": "This is the custom illustration.",
+    "defect": "This is the defect illustration.",
+    "dependency": "This is the dependency illustration.",
+    "dora": "This is the dora illustration.",
+    "executive": "This is the executive illustration.",
+    "change-impact": "This is the change-impact illustration.",
+    "item": "This is the item illustration.",
+    "late-task": "This is the late-task illustration.",
+    "onboarding": "This is the onboarding illustration.",
+    "data-extraction": "This is the data-extraction illustration.",
+    "workflow": "This is the workflow illustration."
+  } 

package/demo/index.html

@@ -3,23 +3,85 @@
   <head>
     <meta charset="UTF-8" />
     <title>Dot Illustrations Library</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Heroicons CDN for Tailwind icons -->
+    <script src="https://unpkg.com/@heroicons/vue@2.0.18/dist/heroicons.min.js"></script>
     <link rel="stylesheet" href="../index.css" />
     <link rel="stylesheet" href="./demo.css" />
     <script src="script.js" defer></script>
+    <script>
+      // Tailwind dark mode config
+      tailwind.config = { darkMode: 'class' };
+    </script>
   </head>
-  <body>
-    <h1>Dot Illustrations</h1>
-    <p>
-      For more details please see
-      <a href="https://github.com/digital-ai/dot-illustrations" target="_blank">
-        https://github.com/digital-ai/dot-illustrations
-      </a>
-    </p>    <p>For using illustrations as HTML include <code class="codeInclude">link rel="stylesheet" href="./index.css"</code></p>
-    </p>
-      <input class="search-wrapper" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for illustrations...">
-      <button id="theme-toggle">Switch to dark mode</button>
-      <div id="illustration-list" class="demo-wrapper dot-illustration">
-  
+  <body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-300">
+    <div id="floating-bar" class="fixed top-0 left-0 w-full z-50 flex items-center justify-center bg-white/90 dark:bg-gray-900/90 shadow-md px-2 py-1 transition-transform duration-300 -translate-y-full" style="backdrop-filter: blur(6px);">
+      <div class="flex flex-row items-center gap-2 w-full max-w-5xl">
+        <input class="floating-search flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" type="text" id="floatingInput" autocomplete="off" placeholder="Search...">
+        <nav class="inline-flex rounded shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
+          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="floating-tab-all" data-tab="all" aria-selected="true" role="tab">All</button>
+          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
+          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
+          <button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
+        </nav>
       </div>
+    </div>
+    <div class="container mx-auto px-4 py-8">
+      <div class="flex flex-col md:flex-row items-center justify-between mb-6 gap-4">
+        <h1 class="text-3xl md:text-5xl font-bold text-center md:text-left text-gray-900 dark:text-white">Dot Illustrations</h1>
+        <button id="theme-toggle" aria-label="Toggle dark mode" class="flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-full shadow hover:bg-gray-300 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500">
+          <span id="theme-icon" class="transition-transform duration-300">
+            <!-- Sun/Moon icon will be injected by JS -->
+          </span>
+          <span class="hidden sm:inline">Switch theme</span>
+        </button>
+      </div>
+      <p class="text-center text-gray-700 dark:text-gray-300 mb-2">
+        For more details please see
+        <a href="https://github.com/digital-ai/dot-illustrations" target="_blank" class="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200 transition">https://github.com/digital-ai/dot-illustrations</a>
+      </p>
+      <p class="text-center text-gray-600 dark:text-gray-400 mb-6">For using illustrations as HTML include <code class="bg-gray-200 dark:bg-gray-800 px-2 py-1 rounded text-sm font-mono">link rel="stylesheet" href="./index.css"</code></p>
+      <div class="flex flex-col md:flex-row items-center justify-center gap-4 mb-8 relative">
+        <input class="search-wrapper w-full md:w-1/2 px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white transition" type="text" id="myInput" autocomplete="off" placeholder="Search for illustrations...">
+        <div id="search-suggestions" class="absolute top-full left-1/2 -translate-x-1/2 w-full md:w-1/2 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-b-lg shadow-lg hidden max-h-72 overflow-y-auto"></div>
+      </div>
+      <!-- Tabs -->
+      <div class="mb-8 flex justify-center">
+        <nav class="inline-flex rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
+          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="tab-all" data-tab="all" aria-selected="true" role="tab">All Illustrations</button>
+          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
+          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
+          <button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
+        </nav>
+      </div>
+      <div id="illustration-list" class="demo-wrapper dot-illustration grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-6 max-h-[calc(100vh-300px)] overflow-y-auto px-2">
+        <!-- Illustrations will be injected here -->
+      </div>
+    </div>
+    <!-- Modal for illustration details -->
+    <div id="illustration-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/70 hidden">
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-2xl max-w-lg w-full p-6 relative flex flex-col items-center">
+        <button id="modal-close" class="absolute top-3 right-3 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl font-bold focus:outline-none">&times;</button>
+        <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="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>
+          </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>
+          <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>
+          </div>
+        </div>
+        <button id="modal-close-bottom" class="mt-4 px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition">Close</button>
+      </div>
+    </div>
   </body>
 </html>