-
+
+ {leftLabel?.length && leftLabel}
-
+
+ {rightLabel?.length && rightLabel}
@@ -64,6 +85,7 @@ type GridBreakpointProps = {
cols?: number
wrap?: boolean
gap?: string | number
+ scrollButtons?: boolean
}
const GridRoot = styled.div<{
@@ -79,6 +101,33 @@ const GridRoot = styled.div<{
display: flex;
flex-direction: row;
gap: 0 1rem;
+
+ button:first-of-type {
+ justify-content: flex-start;
+ }
+
+ button:last-of-type {
+ justify-content: flex-end;
+ }
+ }
+
+ .mdx-grid__scroll--spacing-buttons {
+ width: 100%;
+
+ > div {
+ justify-content: space-between;
+ width: 100%;
+ }
+ }
+
+ .mdx-grid__scroll-button {
+ width: 83px;
+ gap: 0.75rem;
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+ border: 1px solid rgb(var(--lsd-border-primary)) !important;
+ padding: 6px 10px;
}
.mdx-grid__content {
@@ -95,7 +144,7 @@ const GridRoot = styled.div<{
gap: 1rem;
& > * {
- margin-bottom: 2rem;
+ margin-bottom: 3rem;
}
}
@@ -158,7 +207,27 @@ const GridRoot = styled.div<{
'down',
)(css`
.mdx-grid__scroll {
- display: none !important;
+ display: ${props.xs?.scrollButtons ? 'flex' : 'none'};
+
+ & > div {
+ justify-content: flex-end;
+
+ > button:not(:last-child) {
+ border-right: none !important;
+ }
+ }
+ }
+
+ .mdx-grid__scroll-button {
+ width: 28px;
+ }
+
+ .mdx-grid__scroll-button--left {
+ display: none;
+ }
+
+ .mdx-grid__scroll-button--right {
+ display: none;
}
`)}
`
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 9f5b4d1..4b9fdcc 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
@@ -24,6 +24,48 @@ export const Roadmap: React.FC
= ({
children,
...props
}) => {
+ const currentYear = new Date().getFullYear()
+
+ const handleBorderStyle = (year: number, isLast: boolean) => {
+ if (year === currentYear) {
+ return 'solid'
+ } else if (isLast) {
+ return 'none'
+ } else return 'dashed'
+ }
+
+ const getCurrentQuarter = () => {
+ const month = new Date().getMonth()
+ return 'Q' + Math.ceil((month + 1) / 3)
+ }
+
+ const handlePeriodStyle = (period: TimelineItemProps['period']) => {
+ const currentYear = new Date().getFullYear()
+ const currentQuarter = getCurrentQuarter()
+
+ let year, additional
+
+ if (Array.isArray(period)) {
+ ;[year, additional] = period
+ } else {
+ year = period
+ }
+
+ if (year < currentYear) {
+ return 'filled'
+ } else if (year > currentYear) {
+ return 'transparent'
+ } else {
+ if (!additional || additional === '+') {
+ return 'filled'
+ }
+ if (additional <= currentQuarter) {
+ return 'filled'
+ }
+ return 'transparent'
+ }
+ }
+
return (
= ({
{timeline.length > 0 && (
{timeline.map((item, index) => (
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss
index a323a79..c7072a6 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss
@@ -3,7 +3,6 @@
.mdx-timeline-item {
width: 236px;
- height: 100%;
gap: 1rem;
flex: 0 0 auto;
display: flex;
@@ -45,8 +44,18 @@
padding: 3px 12px;
display: inline-block;
border-radius: 10rem;
+}
+
+.mdx-timeline-item__period--filled {
color: rgb(var(--lsd-text-secondary)) !important;
background-color: rgb(var(--lsd-surface-secondary));
+ border: 1px solid rgb(var(--lsd-border-secondary));
+}
+
+.mdx-timeline-item__period--transparent {
+ color: rgb(var(--lsd-text-primary)) !important;
+ background-color: rgb(var(--lsd-surface-primary));
+ border: 1px solid rgb(var(--lsd-border-primary));
}
.mdx-timeline-item__item:last-child {
@@ -63,6 +72,10 @@
justify-content: space-between;
}
+.mdx-timeline-item__description {
+ margin-top: auto;
+}
+
@include utils.responsive('lg', 'down') {
.mdx-timeline-item {
width: 204px;
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 76d8ddd..e50421b 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
@@ -12,11 +12,31 @@ export type TimelineItemProps = Omit<
/** The alignment of the timeline item, either 'top' or 'bottom'. (Optional, default: 'top') */
alignment?: 'top' | 'bottom'
/** The period or time frame associated with the timeline item. e.g., `2023 Q3` */
- period: React.ReactNode
+ period: [number, 'Q1' | 'Q2' | 'Q3' | 'Q4' | '+'] | number
/** The description or content of the timeline item. */
description: React.ReactNode
/** The border style for the timeline item */
borderStyle?: 'solid' | 'dashed' | 'none'
+ /** The period style for the timeline item */
+ periodStyle?: 'transparent' | 'filled'
+}
+
+const formatPeriod = (input: TimelineItemProps['period']) => {
+ if (Array.isArray(input) && input.length > 0) {
+ let result = input[0].toString()
+
+ if (input.length > 1) {
+ if (input[1] === '+') {
+ result += '+'
+ } else {
+ result += ' ' + input[1]
+ }
+ }
+
+ return result
+ } else {
+ return ''
+ }
}
/**
@@ -65,12 +85,14 @@ export type TimelineItemProps = Omit<
*
* ```
*/
+
export const TimelineItem: React.FC = ({
index,
period,
description,
alignment = 'top',
borderStyle,
+ periodStyle,
className,
children,
...props
@@ -93,9 +115,12 @@ export const TimelineItem: React.FC = ({
- {period}
+ {formatPeriod(period)}