mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
feat: refactor CTA component and implement list variant; fixes #93
This commit is contained in:
Hossein Mehrabi
+138
-64
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+47
-27
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user