From f33ef0742f36059c575adb994f11acf7630e5cba Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 1 Jun 2023 18:03:41 +0330 Subject: [PATCH] feat: CTA section new variants --- .../mdx/CallToActionSection/CallToActionSection.scss | 11 +++++++++-- .../mdx/CallToActionSection/CallToActionSection.tsx | 9 +++++++-- .../src/client/components/mdx/Showcase/Showcase.scss | 1 - 3 files changed, 16 insertions(+), 5 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 3df3968..60b1fe6 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 @@ -2,15 +2,16 @@ .mdx-cta-section { display: grid; - margin-top: 260px; - padding-top: 1.5rem; + margin-top: 216px; border-top: 1px solid rgb(var(--lsd-border-primary)); } .mdx-cta-section__title { + margin-top: 1.5rem; } .mdx-cta-section__description { + margin-top: 2rem; } .mdx-cta-section__link { @@ -25,16 +26,22 @@ } .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; } .mdx-cta-section__link { 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 be06d98..0917340 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 @@ -9,6 +9,7 @@ export type CallToActionSectionProps = Omit< > & { title?: React.ReactNode description?: React.ReactNode + columns?: 1 | 2 href?: string label?: string } @@ -17,11 +18,14 @@ export const CallToActionSection: React.FC = ({ label, href, title = '', + columns = 1, description, className, children, ...props }) => { + const singleCol = columns === 1 + return (
= ({ className={clsx( className, 'mdx-cta-section', + `mdx-cta-section--cols-${columns}`, description && 'mdx-cta-section--with-description', )} {...(props as any)} > @@ -42,7 +47,7 @@ export const CallToActionSection: React.FC = ({ {description && ( diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss index 49197e3..258efe0 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss @@ -1,5 +1,4 @@ .mdx-showcase { - padding-top: 8.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;