From fc7d4fc357d11615ce551edc2ccc7f2fe48a1068 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Wed, 20 Dec 2023 17:42:04 +0330
Subject: [PATCH] feat: make CTA section list items clickable

---
 .../CallToActionSection.scss                  | 21 +++++++---
 .../CallToActionSection.tsx                   | 42 ++++++++++++++-----
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
index 847137e..d5a5257 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss
@@ -115,12 +115,19 @@
     flex-direction: column;
     gap: 1.5rem 0;
 
-    > div {
+    > * {
       &:not(:first-child) {
         border-top: 1px solid rgb(var(--lsd-border-primary));
       }
+    }
 
-      > div {
+    & > a {
+      display: block;
+      text-decoration: none;
+    }
+
+    .mdx-cta-section__list-item {
+      > .mdx-cta-section__item-title {
         margin-top: 1.5rem;
         padding: 3px 11px;
         display: inline-block;
@@ -129,7 +136,7 @@
         background-color: rgb(var(--lsd-surface-secondary));
       }
 
-      & > p {
+      & > .mdx-cta-section__item-description {
         margin-top: 1rem;
       }
     }
@@ -144,15 +151,17 @@
     .mdx-cta-section__list {
       margin-top: 4rem;
 
-      & > div {
+      & > * {
         border-top: 1px solid rgb(var(--lsd-border-primary));
+      }
 
-        & > div {
+      & .mdx-cta-section__list-item {
+        & > .mdx-cta-section__item-title {
           font-size: 0.875rem !important;
           line-height: 1.25rem !important;
         }
 
-        & > p {
+        & > .mdx-cta-section__item-description {
           @include lsd.typography('h4', true);
         }
       }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
index 6c89329..d250649 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx
@@ -51,6 +51,10 @@ export type CallToActionSectionProps = Omit<
      * The description of the list item
      */
     description: React.ReactNode
+    /**
+     * The URL to link to when the button is clicked
+     */
+    href?: string
   }[]
 }
 
@@ -159,16 +163,34 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
       </div>
       {list.length > 0 && (
         <div className="mdx-cta-section__list">
-          {list.map((option, index) => (
-            <div key={index}>
-              <Typography variant="subtitle2" component="div">
-                {option.title}
-              </Typography>
-              <Typography variant="h2" component="p">
-                {option.description}
-              </Typography>
-            </div>
-          ))}
+          {list.map((option, index) => {
+            const content = (
+              <div className="mdx-cta-section__list-item" key={index}>
+                <Typography
+                  component="div"
+                  variant="subtitle2"
+                  className="mdx-cta-section__item-title"
+                >
+                  {option.title}
+                </Typography>
+                <Typography
+                  variant="h2"
+                  component="p"
+                  className="mdx-cta-section__item-description"
+                >
+                  {option.description}
+                </Typography>
+              </div>
+            )
+
+            return option.href ? (
+              <a href={option.href} target="_blank">
+                {content}
+              </a>
+            ) : (
+              content
+            )
+          })}
         </div>
       )}
     </div>