From 1ed8bf3a4821ee9e32485f38e171851c54bd681e Mon Sep 17 00:00:00 2001
From: Carlos <53526597+carlosgauci@users.noreply.github.com>
Date: Thu, 14 Sep 2023 11:32:02 +0200
Subject: [PATCH] add haystack version tag (#207)

---
 .../assets/sass/pages/_grid-page.scss         | 15 ++++++------
 .../layouts/partials/integration-card.html    | 23 +++++++++++++++++++
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/themes/haystack/assets/sass/pages/_grid-page.scss b/themes/haystack/assets/sass/pages/_grid-page.scss
index 6a6d0f70..4b29ffe9 100644
--- a/themes/haystack/assets/sass/pages/_grid-page.scss
+++ b/themes/haystack/assets/sass/pages/_grid-page.scss
@@ -30,7 +30,6 @@
 
   // Integrations grid
   .grid-page-grid.integrations-grid {
-   
     @include sm {
       grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
     }
@@ -79,7 +78,7 @@
     position: relative;
     background-color: var(--color-bg-dark-blue);
 
-     h3 {
+    h3 {
       font-size: 1.5rem;
       text-align: center;
       color: var(--color-white);
@@ -114,7 +113,7 @@
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
-      gap: 0.25rem;
+      gap: 0.5rem;
 
       > div {
         font-size: 0.8rem;
@@ -122,11 +121,14 @@
         background-color: var(--color-light-grey);
         color: var(--color-dark-blue);
         text-transform: capitalize;
-        border-radius:999px;
+        border-radius: 999px;
         display: flex;
         align-items: center;
         gap: 0.25rem;
 
+        &.version {
+          background-color: var(--color-yellow);
+        }
 
         .icon {
           flex-shrink: 0;
@@ -147,7 +149,7 @@
       gap: 0.5rem;
       align-items: flex-end;
       z-index: 999;
-     
+
       .maintainer-icon {
         background-color: var(--color-blue);
         padding: 0.6rem;
@@ -179,9 +181,6 @@
         }
       }
     }
-
-    
-
   }
 
   // Tutorial footer
diff --git a/themes/haystack/layouts/partials/integration-card.html b/themes/haystack/layouts/partials/integration-card.html
index 48532768..3d5784bb 100644
--- a/themes/haystack/layouts/partials/integration-card.html
+++ b/themes/haystack/layouts/partials/integration-card.html
@@ -28,7 +28,30 @@ <h3>{{ .Params.name }}</h3>
   <p>{{ .Params.description }}</p>
 
 
+  {{/*  Tags  */}}
   <div class="integration-card-tags">
+    {{/*  Version  */}}
+    {{ with .Params.version }}
+      <div class="version">
+        <span class="icon">
+          <svg
+            width="12"
+            height="13"
+            viewBox="0 0 10 11"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.64185 4.13731L6.66646 3.70489L5.33638 1.0084C5.30005 0.934575 5.24029 0.874809 5.16646 0.838481C4.9813 0.747075 4.7563 0.823247 4.66372 1.0084L3.33365 3.70489L0.358256 4.13731C0.276224 4.14903 0.201224 4.1877 0.143802 4.24629C0.0743826 4.31764 0.0361291 4.41364 0.0374475 4.51318C0.038766 4.61272 0.0795484 4.70767 0.150834 4.77715L2.30357 6.87598L1.79497 9.83965C1.78305 9.90859 1.79068 9.9795 1.817 10.0443C1.84332 10.1092 1.88727 10.1653 1.94388 10.2064C2.00049 10.2475 2.06749 10.272 2.13728 10.2769C2.20707 10.2819 2.27685 10.2672 2.33872 10.2346L5.00005 8.83536L7.66138 10.2346C7.73404 10.2732 7.81841 10.2861 7.89927 10.2721C8.10318 10.2369 8.24029 10.0436 8.20513 9.83965L7.69654 6.87598L9.84927 4.77715C9.90787 4.71973 9.94654 4.64473 9.95826 4.5627C9.9899 4.35762 9.84693 4.16778 9.64185 4.13731ZM6.79068 6.58067L7.21373 9.04512L5.00005 7.88262L2.78638 9.04629L3.20943 6.58184L1.4188 4.83575L3.8938 4.47598L5.00005 2.23418L6.1063 4.47598L8.5813 4.83575L6.79068 6.58067Z"
+              fill="#2B2F55"
+            />
+          </svg>
+        </span>
+        <span>{{ . }}</span>
+      </div>
+    {{ end }}
+    
+    {{/*  Type  */}}
     <div>
       <span class="icon">
         <svg