Adds card interactivity for product cards on the platform landing page

Signed-off-by: Aaron Stephanus <[email protected]>
awssamit · Sep 28, 2023 · 77a569d · 77a569d
1 parent c353a2f
commit 77a569d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/_includes/platform-products.html b/_includes/platform-products.html
@@ -5,3 +5,4 @@
         {{product}}
     {% endfor %}
 </div>
+{% include card-clickability.html card_container_selector=".platform-product-collection" card_classname="platform-product" %}
diff --git a/_platform_products/data_prepper.md b/_platform_products/data_prepper.md
@@ -4,7 +4,7 @@ title: Data Prepper
 image: '/assets/media/platform/Data-Prepper.png'
 ---
 
-### Data Prepper
+### [Data Prepper](https://github.com/opensearch-project/data-prepper){:target="_blank"}
 
 Data Prepper is the server-side data collector designed to enrich, transform, and aggregate data for downstream analytics and visualization within OpenSearch. 
 

diff --git a/_platform_products/opensearch_core.md b/_platform_products/opensearch_core.md
@@ -4,7 +4,8 @@ title: OpenSearch Core
 image: '/assets/media/platform/Core.png'
 ---
 
-### OpenSearch Core
+### [OpenSearch Core](https://github.com/opensearch-project/OpenSearch){:target="_blank"}
+
 OpenSearch is a powerful search and analytics engine built on [Apache Lucene](https://lucene.apache.org/){:target="_blank"}. 
 
 At its core sits the fundamental tooling that makes OpenSearch an ideal foundation for a vast range of applications. 

diff --git a/_platform_products/opensearch_dashboards.md b/_platform_products/opensearch_dashboards.md
@@ -4,7 +4,7 @@ title: OpenSearch Dashboards
 image: '/assets/media/platform/Dashboards.png'
 ---
 
-### OpenSearch Dashboards
+### [OpenSearch Dashboards](https://playground.opensearch.org/app/home){:target="_blank"}
 
 OpenSearch Dashboards is the open-source data visualization toolset built to work with OpenSearch. 
 

diff --git a/_sass/_redesign-platform.scss b/_sass/_redesign-platform.scss
@@ -1280,6 +1280,29 @@ $solutions-card-bottom-margin: 36px;
             row-gap: 0;
         }
         margin-bottom: 75px;
+        :has(a[href]) {
+            cursor: pointer;
+        }
+        &:hover {
+            .platform-product--description {
+                a {
+                    border-bottom: 2px solid $primary-pacific-blue;
+                    color: $primary-open-sky;
+                }
+            }
+        }
+        &:has(a:focus) {
+            box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50);
+        }
+        &:has(a:active) {
+            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset;
+        }
+        &.platform-product__focused {
+            box-shadow: 0px 4px 12px 8px rgba(0, 99, 184, 0.50);
+        }
+        &.platform-product__active {
+            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) inset;
+        }
         > .platform-product--image {
             @media screen and (min-width: 835px) {
                 flex-basis: 47.43%;
@@ -1343,6 +1366,9 @@ $solutions-card-bottom-margin: 36px;
             box-sizing: border-box;
             > h3 {
                 @include header-level3($primary-open-sky-s2);
+                > a {
+                    @include header-level3($primary-open-sky-s2);
+                }
                 margin-top: 0;
             }
             > p {