@@ -234,3 +237,15 @@ export const IconDownload = (props: TIconProps): JSX.Element => (
)
+
+export const IconAdd = (props: TIconProps): JSX.Element => (
+
+
+
+)
+
+export const IconRemove = (props: TIconProps): JSX.Element => (
+
+
+
+)
diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss
index 63efbd5..2f2e313 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/style.module.scss
@@ -15,15 +15,38 @@
width: 40px;
}
}
+}
- &.dark {
- .fill {
- fill: var(--ifm-color-black);
+[data-theme='dark'] {
+ .icon {
+ &.fill {
+ &,
+ * {
+ fill: var(--ifm-color-white);
+ }
}
- .stroke {
- stroke: var(--ifm-color-white);
+ &.stroke {
+ svg,
+ svg * {
+ stroke: var(--ifm-color-white);
+ }
+ }
+ }
+}
+
+[data-theme='light'] {
+ .icon {
+ &.fill {
+ &,
+ * {
+ fill: var(--ifm-color-black);
+ }
+ }
+ &.stroke {
+ svg,
+ svg * {
+ stroke: var(--ifm-color-black);
+ }
}
}
- &.light {
- }
}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss
new file mode 100644
index 0000000..fa0a076
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.scss
@@ -0,0 +1,45 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-accordion-item {
+ border-bottom: 1px solid rgb(var(--lsd-border-primary));
+
+ > input {
+ display: none;
+ }
+}
+
+.mdx-accordion-item__header {
+ min-height: 88px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 0;
+ gap: 0 16px;
+
+ &,
+ * {
+ cursor: pointer;
+ }
+}
+
+.mdx-accordion-item__content-wrapper {
+ overflow: hidden;
+ height: auto;
+}
+
+.mdx-accordion-item__content {
+ height: 0;
+}
+
+.mdx-accordion-item--open {
+ .mdx-accordion-item__content {
+ height: auto;
+ padding-top: 6px;
+ padding-bottom: 1.875rem;
+ }
+}
+
+@include utils.responsive('lg', 'down') {
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.tsx
new file mode 100644
index 0000000..80fb32a
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AccordionItem/AccordionItem.tsx
@@ -0,0 +1,72 @@
+import clsx from 'clsx'
+import React, { useEffect, useState } from 'react'
+import './AccordionItem.scss'
+import { Typography } from '@acid-info/lsd-react'
+import { IconAdd, IconRemove } from '../../Icon'
+import uniqueId from 'lodash/uniqueId'
+
+export type AccordionItemProps = Omit<
+ React.HTMLProps
,
+ 'title'
+> & {
+ open?: boolean
+ title: React.ReactNode
+ onToggle?: (open: boolean) => void
+}
+
+export const AccordionItem: React.FC = ({
+ open: openProp,
+ onToggle,
+ title,
+ className,
+ children,
+ ...props
+}) => {
+ const id = uniqueId('accordion-item-')
+ const [open, setOpen] = useState(openProp ?? false)
+
+ if (typeof openProp !== 'undefined' && openProp !== open) {
+ setOpen(openProp)
+ }
+
+ const handleToggle = () => {
+ if (typeof openProp !== 'undefined') {
+ onToggle && onToggle(!open)
+ } else {
+ setOpen((val) => !val)
+ }
+ }
+
+ return (
+
+
+
handleToggle()}
+ >
+
+ {title}
+
+
+ {open ? : }
+
+
+
+
{list.map((option, index) => (
-
+
{option.title}
-
+
{option.description}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
index dc03e74..f5e2475 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
@@ -69,9 +69,21 @@
.mdx-feature-list__feature-description {
}
-.mdx-feature-list__extra {
- margin-top: 3.5rem;
- padding: 0 1rem;
+.mdx-feature-list__header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 2rem;
+}
+
+.mdx-feature-list--cta-top {
+}
+
+.mdx-feature-list--cta-bottom {
+ .mdx-feature-list__extra {
+ margin-top: 3.5rem;
+ padding: 0 1rem;
+ }
}
@include utils.responsive('lg', 'up') {
@@ -110,14 +122,16 @@
@include utils.responsive('lg', 'down') {
.mdx-feature-list {
.mdx-feature-list__title {
- @include lsd.typography('subtitle1', false);
+ @include lsd.typography('subtitle2', false);
padding: 1rem 0;
}
}
- .mdx-feature-list__extra {
- margin-top: 2rem;
- padding: 0;
+ .mdx-feature-list--cta-bottom {
+ .mdx-feature-list__extra {
+ margin-top: 2rem;
+ padding: 0;
+ }
}
.mdx-feature-list__list {
@@ -136,12 +150,12 @@
}
.mdx-feature-list__feature-title {
- @include lsd.typography('h5', false);
+ @include lsd.typography('h4', false);
margin-top: 1rem;
}
.mdx-feature-list__feature-description {
- @include lsd.typography('subtitle1');
+ @include lsd.typography('body1', false);
margin-top: 3rem;
}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
index cf0cf4e..4f33093 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
@@ -24,6 +24,11 @@ export type FeatureListProps = Omit<
* The vertical alignment of feature description.
*/
alignment?: 'bottom' | 'top'
+
+ /**
+ * The position of the call to action buttons.
+ */
+ ctaPosition?: 'top' | 'bottom'
}
/**
@@ -53,6 +58,7 @@ export const FeatureList: React.FC
= ({
alignment = 'bottom',
features = [],
className,
+ ctaPosition = 'bottom',
children,
...props
}) => {
@@ -62,16 +68,22 @@ export const FeatureList: React.FC = ({
className,
'mdx-feature-list',
`mdx-feature-list--${alignment}-aligned`,
+ `mdx-feature-list--cta-${ctaPosition}`,
)}
{...props}
>
-
- {title}
-
+
+
+ {title}
+
+ {children && ctaPosition === 'top' && (
+
{children}
+ )}
+
{features.map((feature, index) => (
@@ -84,14 +96,14 @@ export const FeatureList: React.FC = ({
{index + 1}
{feature.title}
@@ -102,7 +114,9 @@ export const FeatureList: React.FC = ({
))}
{children}
}
+ {children && ctaPosition === 'bottom' && (
+ {children}
+ )}
-
+
{issue.title}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx
index 99e9ca2..54d4e48 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx
@@ -1,15 +1,10 @@
-import {
- ChevronLeftIcon,
- ChevronRightIcon,
- IconButton,
- IconButtonGroup,
- THEME_BREAKPOINTS,
-} from '@acid-info/lsd-react'
+import { THEME_BREAKPOINTS } from '@acid-info/lsd-react'
import { css } from '@emotion/react'
import styled from '@emotion/styled'
import clsx from 'clsx'
import React, { useRef } from 'react'
import { lsdUtils } from '../../../lib/lsd.utils'
+import { ScrollButtons } from '../ScrollButtons'
import { GridItem } from './GridItem'
export type GridProps = React.ComponentProps & {
@@ -29,62 +24,17 @@ export const Grid: { Item: typeof GridItem } & React.FC = ({
}) => {
const ref = useRef(null)
- const scroll = (direction: -1 | 1) => {
- const el = ref.current
- if (!el) return
-
- const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236
- el.scrollTo({
- behavior: 'smooth',
- left:
- el.scrollLeft +
- (el.getBoundingClientRect()?.width - itemWidth) * direction,
- })
- }
-
return (
{actions}
-
-
-
-
- {leftLabel.length ? (
-
- {leftLabel}
-
- ) : null}
-
-
- {rightLabel.length ? (
-
- {rightLabel}
-
- ) : null}
-
-
-
-
+
{children}
@@ -113,26 +63,6 @@ const GridRoot = styled.div<{
.mdx-grid__scroll {
display: flex;
- flex-direction: row;
- gap: 0 1rem;
- margin-left: auto;
- }
-
- .mdx-grid__scroll--spacing-buttons {
- width: 100%;
-
- > div {
- justify-content: space-between;
- width: 100%;
- }
-
- > div > button:not(:last-child) {
- border-right: 1px solid rgb(var(--lsd-border-primary)) !important;
- }
- }
-
- .mdx-grid__scroll-button {
- display: flex;
}
.mdx-grid__content {
@@ -211,47 +141,4 @@ const GridRoot = styled.div<{
`}
`)
})}
-
- ${(props) =>
- lsdUtils.responsive(
- props.theme as any,
- 'md',
- 'up',
- )(css`
- .mdx-grid__scroll-button--with-label {
- width: auto;
- min-width: 83px;
- padding: 5px 11px 5px 9px;
- gap: 12px;
-
- &:first-of-type {
- justify-content: flex-start;
- }
-
- &:last-of-type {
- justify-content: flex-start;
- }
- }
- `)}
-
- ${(props) =>
- lsdUtils.responsive(
- props.theme as any,
- 'sm',
- 'down',
- )(css`
- .mdx-grid__scroll {
- & > div {
- justify-content: flex-end;
-
- > button:not(:last-child) {
- border-right: none !important;
- }
- }
- }
-
- .mdx-grid__scroll-button-label {
- display: none;
- }
- `)}
`
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx
index 57d89ee..1d2fbe4 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx
@@ -21,7 +21,7 @@ export const HeroDescription: React.FC
= ({
return (
= ({
className="mdx-jpd__job-link"
>
-
+
{job.title}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss
new file mode 100644
index 0000000..40bf7b5
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.scss
@@ -0,0 +1,33 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-logo-carousel {
+ .mdx-section-header__title {
+ flex-basis: 100%;
+ }
+
+ .mdx-section-header__extra {
+ margin-left: auto;
+ }
+
+ .mdx-logo-carousel__inner {
+ margin-top: 100px;
+ }
+
+ .mdx-logo-carousel__item {
+ flex-shrink: 0;
+ }
+
+ .mdx-logo-carousel__logo {
+ height: 56px;
+ width: auto;
+ }
+}
+
+@include utils.responsive('lg', 'down') {
+ .mdx-logo-carousel {
+ .mdx-logo-carousel__inner {
+ margin-top: 64px;
+ }
+ }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx
new file mode 100644
index 0000000..f0bd9ad
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/LogoCarousel.tsx
@@ -0,0 +1,64 @@
+import { Typography } from '@acid-info/lsd-react'
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import React, { useRef } from 'react'
+import './LogoCarousel.scss'
+import { Grid, SectionHeader } from '..'
+import { ScrollButtons } from '../ScrollButtons'
+import { useHydrated } from '../../../lib/useHydrated'
+
+export type LogoCarouselProps = Omit<
+ React.HTMLAttributes,
+ 'title'
+> & {
+ title?: React.ReactNode
+ items?: {
+ title?: string
+ logoSrc?: string
+ logoSrcDark?: string
+ }[]
+}
+
+export const LogoCarousel: React.FC = ({
+ title,
+ className,
+ items = [],
+ children,
+ ...props
+}) => {
+ const hydrated = useHydrated()
+ const ref = useRef(null)
+ const containerRef = useRef(null)
+
+ if (typeof window !== 'undefined' && hydrated && !containerRef.current) {
+ containerRef.current =
+ ref.current?.querySelector('.mdx-grid__content') ?? null
+
+ console.log(containerRef.current, ref.current)
+ }
+
+ return (
+
+
+
+
+
+ {items.map((item) => (
+
+
+
+ ))}
+
+
+ )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts
new file mode 100644
index 0000000..0c94203
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/LogoCarousel/index.ts
@@ -0,0 +1 @@
+export * from './LogoCarousel'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/NewsletterSubscription/NewsletterSubscription.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/NewsletterSubscription/NewsletterSubscription.scss
index a7bfc9a..158be7d 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/NewsletterSubscription/NewsletterSubscription.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/NewsletterSubscription/NewsletterSubscription.scss
@@ -37,14 +37,12 @@
}
.mdx-ns__description {
- font-size: 32px !important;
- line-height: 40px !important;
+ @include lsd.typography('h3', false);
}
@include utils.responsive('md', 'down') {
.mdx-ns__description {
- font-size: 24px !important;
- line-height: 32px !important;
+ @include lsd.typography('h4', false);
}
.mdx-ns__inner {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx
index d5daf00..582353a 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/PageCard/PageCard.tsx
@@ -51,7 +51,7 @@ export const PageCard: React.FC = ({
{description}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss
index cefd173..902ff42 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss
@@ -27,6 +27,7 @@
width: 40px !important;
height: 40px !important;
border-radius: 50%;
+ border: 1px solid rgb(var(--lsd-border-primary));
svg {
width: 40px !important;
@@ -39,7 +40,6 @@
}
.mdx-profile-card__name {
- @include lsd.typography('h4');
}
.mdx-profile-card__buttons {
@@ -103,6 +103,6 @@
}
.mdx-profile-card__name {
- @include lsd.typography('h6');
+ @include lsd.typography('h5');
}
}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx
index 1846dea..a8cac6e 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx
@@ -76,7 +76,7 @@ export const ProfileCard: React.FC = ({
)}
{name}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss
index 6f6240e..a79baa8 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss
@@ -19,7 +19,7 @@
}
.mdx-roadmap__timeline {
- margin-top: 7.25rem;
+ margin-top: 6.25rem;
.mdx-grid-item:last-child {
.mdx-timeline-item__border {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
index 95921f7..48ead56 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx
@@ -73,7 +73,7 @@ export const Roadmap: React.FC = ({
return (
-
+
{title}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss
new file mode 100644
index 0000000..eae0ebe
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss
@@ -0,0 +1,57 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-scroll-buttons {
+ width: 100%;
+
+ > div {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ }
+}
+
+@include utils.responsive('md', 'up') {
+ .mdx-scroll-buttons__button--with-label {
+ width: auto !important;
+ min-width: 83px;
+ padding: 5px 11px 5px 9px !important;
+ gap: 12px;
+
+ &:first-of-type {
+ justify-content: flex-start;
+ }
+
+ &:last-of-type {
+ justify-content: flex-start;
+ }
+ }
+
+ .mdx-scroll-buttons--spaced {
+ & > div {
+ gap: 0 1rem;
+ justify-content: space-between;
+
+ & > button:not(:last-child) {
+ border-right: 1px solid rgb(var(--lsd-border-primary)) !important;
+ }
+ }
+ }
+}
+
+@include utils.responsive('md', 'down') {
+ .mdx-scroll-buttons {
+ & > div {
+ justify-content: flex-end;
+
+ > button:not(:last-child) {
+ border-right: none !important;
+ }
+ }
+
+ .mdx-scroll-buttons__label {
+ display: none;
+ }
+ }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx
new file mode 100644
index 0000000..651f385
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx
@@ -0,0 +1,85 @@
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ IconButton,
+ IconButtonGroup,
+} from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import './ScrollButtons.scss'
+
+export type ScrollButtonsProps = React.HTMLProps & {
+ containerId?: string
+ containerRef?: React.RefObject
+ leftLabel?: string
+ rightLabel?: string
+ spacing?: 'spaced' | 'grouped'
+}
+
+export const ScrollButtons: React.FC = ({
+ leftLabel,
+ rightLabel,
+ containerRef,
+ containerId,
+ spacing = 'grouped',
+ ...props
+}) => {
+ const scroll = (direction: -1 | 1) => {
+ const el = containerRef
+ ? containerRef.current
+ : document.querySelector(`#${containerId}`)
+ if (!el) return
+
+ const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236
+ el.scrollTo({
+ behavior: 'smooth',
+ left:
+ el.scrollLeft +
+ (el.getBoundingClientRect()?.width - itemWidth) * direction,
+ })
+ }
+
+ return (
+
+
+ 0 &&
+ 'mdx-scroll-buttons__button--with-label',
+ )}
+ size="small"
+ onClick={scroll.bind(null, -1)}
+ >
+
+ {leftLabel && leftLabel.length > 0 && (
+ {leftLabel}
+ )}
+
+
+ {rightLabel && rightLabel.length > 0 && (
+ {rightLabel}
+ )}
+
+
+
+
+ )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts
new file mode 100644
index 0000000..24c317c
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts
@@ -0,0 +1 @@
+export * from './ScrollButtons'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss
index c477243..2537509 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.scss
@@ -15,12 +15,23 @@
}
}
+.mdx-section-header__title {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 2rem;
+}
+
@include utils.responsive('lg', 'down') {
.mdx-section-header {
flex-direction: column;
&__title {
- @include lsd.typography('body1');
+ @include lsd.typography('subtitle2');
+ }
+
+ &__description {
+ @include lsd.typography('h4');
}
}
}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx
index 93a04b8..27063c8 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/SectionHeader/SectionHeader.tsx
@@ -9,28 +9,27 @@ export type SectionHeaderProps = Omit & {
description?: React.ReactNode
}
-export const SectionHeader: React.FC = ({
- title,
- description,
- className,
- children,
- ...props
-}) => {
+export const SectionHeader: React.FC<
+ React.PropsWithChildren
+> = ({ title, description, className, children, ...props }) => {
return (
{title}
+ {children && (
+ {children}
+ )}
{description && (
{description}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss
index 408ab2c..4775fdc 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss
@@ -6,20 +6,54 @@
}
.mdx-showcase-card__inner {
- padding: 24px 8px;
+ padding-top: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
}
.mdx-showcase-card__logo {
+ width: 58px;
+ height: auto;
+}
+
+.mdx-showcase-card__index {
+ width: 30px;
+ height: 30px;
+ color: rgb(var(--lsd-text-secondary)) !important;
+ background-color: rgb(var(--lsd-surface-secondary));
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
}
.mdx-showcase-card__name {
- margin-top: 1rem;
}
.mdx-showcase-card__description {
- border-top: 1px solid rgb(var(--lsd-border-primary));
- margin-top: 24px;
- padding-top: 16px;
+ margin-top: -0.125rem;
+ padding-top: 0.5rem;
+}
+
+.mdx-showcase-card--large {
+ .mdx-showcase-card__logo {
+ width: 58px;
+ }
+}
+
+.mdx-showcase-card--small {
+ .mdx-showcase-card__logo {
+ width: 34px;
+ }
+}
+
+.mdx-showcase-card--border-solid {
+ .mdx-showcase-card__description {
+ border-top: 1px solid rgb(var(--lsd-border-primary));
+ padding-top: 1rem;
+ }
}
@include utils.responsive('lg', 'down') {
@@ -29,7 +63,8 @@
}
.mdx-showcase-card__name {
- @include lsd.typography('h6');
+ font-size: 1.375rem !important;
+ line-height: 1.75rem !important;
}
.mdx-showcase-card__description {
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx
index 864160c..8ec7f02 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx
@@ -8,24 +8,47 @@ export type ShowcaseCardProps = Omit<
React.HTMLAttributes,
'title'
> & {
+ index?: React.ReactNode
logoSrc?: string
logoSrcDark?: string
name: React.ReactNode
description: React.ReactNode
+ size?: 'small' | 'large'
+ borderStyle?: 'none' | 'solid'
}
export const ShowcaseCard: React.FC = ({
+ index,
name,
logoSrc,
logoSrcDark,
description,
className,
+ size = 'large',
+ borderStyle = 'solid',
children,
...props
}) => {
return (
-
+
+ {index && (
+
+ {index}
+
+ )}
{(logoSrc || logoSrcDark) && (
= ({
className="mdx-showcase-card__logo"
/>
)}
-
- {name}
-
-
- {description}
-
+ {name && (
+
+ {name}
+
+ )}
+ {description && (
+
+ {description}
+
+ )}
)
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx
index c19f8af..cdaef6e 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx
@@ -109,7 +109,7 @@ export const TimelineItem: React.FC
= ({
)}
= ({