From 92d9824ad9b0bf04acb079db43db208870936707 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Fri, 7 Jul 2023 17:23:43 +0330
Subject: [PATCH] feat: refactor CTA component and implement list variant;
 fixes #93

---
 .../CallToActionSection.scss                  | 202 ++++++++++++------
 .../CallToActionSection.tsx                   |  74 ++++---
 2 files changed, 185 insertions(+), 91 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 f67920a..dbed7e2 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
@@ -4,87 +4,161 @@
 .mdx-cta-section {
   display: grid;
   border-top: 1px solid rgb(var(--lsd-border-primary));
-}
 
-.mdx-cta-section__title {
-  margin-top: 1.5rem;
-}
+  padding: 24px 0 0 0;
 
-.mdx-cta-section__description {
-  margin-top: 2rem;
-}
-
-.mdx-cta-section__link {
-  margin-top: 2rem;
-
-  button,
-  button span {
-    font-size: inherit;
-    line-height: inherit;
-    font-weight: inherit;
-  }
-}
-
-.mdx-cta-section--with-description {
-}
-
-.mdx-cta-section--cols-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  padding-top: 1.5rem;
-
-  .mdx-cta-section__title {
-    grid-column: 1 / 2;
-    margin-top: 0;
-  }
-
-  .mdx-cta-section__description {
-    grid-column: 2 / 3;
-    margin-top: 0;
+  @include utils.responsive('lg', 'down') {
+    padding: 16px 0 0 0;
   }
 
   .mdx-cta-section__link {
-    grid-column: 2 / 3;
-    grid-row: 2 / 3;
+    display: block;
   }
 }
 
-.mdx-cta-section:not(.mdx-cta-section--with-description) {
+.mdx-cta-section--title-only {
   .mdx-cta-section__title {
+    @include lsd.typography('h1', false);
+
     max-width: 886px;
   }
+
+  @include utils.responsive('lg', 'down') {
+    .mdx-cta-section__title {
+      font-size: 1.5rem !important;
+      line-height: 2rem !important;
+    }
+  }
+}
+
+.mdx-cta-section--full-width {
+  .mdx-cta-section__container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0 1rem;
+  }
+
+  .mdx-cta-section__title {
+    @include lsd.typography('h6', false);
+  }
+
+  .mdx-cta-section__description {
+    @include lsd.typography('h4', false);
+  }
+
+  .mdx-cta-section__link {
+    grid-area: 2 / 2 / 3 / 3;
+  }
+
+  @include utils.responsive('lg', 'down') {
+    .mdx-cta-section__container {
+      display: block;
+    }
+
+    .mdx-cta-section__description {
+      margin-top: 1.5rem;
+    }
+  }
+}
+
+.mdx-cta-section--simple {
+  .mdx-cta-section__title {
+    @include lsd.typography('h6', false);
+  }
+
+  .mdx-cta-section__description {
+    @include lsd.typography('h2', false);
+
+    margin-top: 2rem;
+  }
+
+  @include utils.responsive('lg', 'down') {
+    .mdx-cta-section__description {
+      margin-top: 1.5rem;
+    }
+  }
+}
+
+.mdx-cta-section--list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 1rem;
+
+  .mdx-cta-section__container {
+    grid-column: 1 / 2;
+  }
+
+  .mdx-cta-section__title {
+    @include lsd.typography('h6', false);
+  }
+
+  .mdx-cta-section__description {
+    @include lsd.typography('h2', false);
+
+    margin-top: 2rem;
+  }
+
+  .mdx-cta-section__list {
+    grid-column: 2 / 3;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem 0;
+
+    > div {
+      &:not(:first-child) {
+        border-top: 1px solid rgb(var(--lsd-border-primary));
+      }
+
+      > div {
+        margin-top: 1.5rem;
+        padding: 3px 11px;
+        display: inline-block;
+        border-radius: 1rem;
+        color: rgb(var(--lsd-text-secondary));
+        background-color: rgb(var(--lsd-surface-secondary));
+      }
+
+      & > p {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  .mdx-cta-section__link {
+  }
+
+  @include utils.responsive('lg', 'down') {
+    display: block;
+
+    .mdx-cta-section__list {
+      margin-top: 4rem;
+
+      & > div {
+        border-top: 1px solid rgb(var(--lsd-border-primary));
+
+        & > div {
+          font-size: 0.875rem !important;
+          line-height: 1.25rem !important;
+        }
+
+        & > p {
+          font-size: 1.5rem !important;
+          line-height: 2rem !important;
+        }
+      }
+    }
+  }
 }
 
 @include utils.responsive('lg', 'down') {
-  .mdx-cta-section {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
   .mdx-cta-section__title {
-    @include lsd.typography('subtitle1');
-    margin-top: 1rem;
+    font-size: 1rem !important;
+    line-height: 100% !important;
   }
 
   .mdx-cta-section__description {
-    @include lsd.typography('h5');
-    margin-top: 1.5rem !important;
-  }
-
-  .mdx-cta-section__link {
-    @include lsd.typography('label2');
-    margin-top: 2rem;
-
-    button {
-      padding: 6px 12px;
-    }
-  }
-
-  .mdx-cta-section:not(.mdx-cta-section--with-description) {
-    .mdx-cta-section__title {
-      @include lsd.typography('h5');
-    }
+    font-size: 1.5rem !important;
+    line-height: 2rem !important;
   }
 }
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 0203af8..fcc0af2 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
@@ -15,57 +15,77 @@ export type CallToActionSectionProps = Omit<
   label?: string
   target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target']
   variant?: ButtonProps['variant']
+  list?: {
+    title: React.ReactNode
+    description: React.ReactNode
+  }[]
 }
 
 export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
   label,
   href,
-  title = '',
+  title,
   columns = 1,
   description,
+  list = [],
   target,
   className,
   children,
   variant = 'outlined',
   ...props
 }) => {
-  const singleCol = columns === 1
+  const withDescription = !!description
+  const withList = list.length > 0
+
+  const display =
+    title && !withDescription && !withList
+      ? 'title-only'
+      : title && description && columns === 2
+      ? `full-width`
+      : title && description && list.length > 0
+      ? 'list'
+      : 'simple'
 
   return (
     <div
       className={clsx(
         className,
         'mdx-cta-section',
-        `mdx-cta-section--cols-${columns}`,
-        description && 'mdx-cta-section--with-description',
+        `mdx-cta-section--${display}`,
       )}
       {...(props as any)}
     >
-      <Typography
-        variant={singleCol && !description ? 'h1' : 'h6'}
-        component="h2"
-        className="mdx-cta-section__title"
-      >
-        {title}
-      </Typography>
-      {description && (
-        <Typography
-          variant={singleCol ? 'h2' : 'h4'}
-          component="h3"
-          className="mdx-cta-section__description"
-        >
+      <div className="mdx-cta-section__container">
+        <Typography component="h2" className="mdx-cta-section__title">
+          {title}
+        </Typography>
+        <Typography component="h3" className="mdx-cta-section__description">
           {description}
         </Typography>
-      )}
-      {href && (
-        <CallToActionButton
-          target={target}
-          href={href}
-          className="mdx-cta-section__link"
-          variant={variant}
-        >
-          {label}
-        </CallToActionButton>
+        {href && (
+          <CallToActionButton
+            target={target}
+            href={href}
+            className="mdx-cta-section__link"
+            variant={variant}
+          >
+            {label}
+          </CallToActionButton>
+        )}
+      </div>
+      {list.length > 0 && (
+        <div className="mdx-cta-section__list">
+          {list.map((option, index) => (
+            <div key={index}>
+              <Typography variant="subtitle1" component="div">
+                {option.title}
+              </Typography>
+              <Typography variant="h3" component="p">
+                {option.description}
+              </Typography>
+            </div>
+          ))}
+        </div>
       )}
     </div>
   )