fix: fix bugs with roadmap and grid

packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx

@@ -21,8 +21,8 @@ export type GridProps = React.ComponentProps<typeof GridRoot> & {
 
 export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
   actions,
-  leftLabel,
-  rightLabel,
+  leftLabel = '',
+  rightLabel = '',
   spacingButtons = false,
   children,
   ...props
@@ -54,19 +54,33 @@ export const Grid: { Item: typeof GridItem } & React.FC<GridProps> = ({
         >
           <IconButtonGroup size="small" color="primary">
             <IconButton
-              className={clsx('mdx-grid__scroll-button')}
+              className={clsx(
+                'mdx-grid__scroll-button',
+                leftLabel?.length && 'mdx-grid__scroll-button--with-label',
+              )}
               size="small"
               onClick={scroll.bind(null, -1)}
             >
               <ChevronLeftIcon />
-              {leftLabel?.length && leftLabel}
+              {leftLabel.length ? (
+                <span className="mdx-grid__scroll-button-label">
+                  {leftLabel}
+                </span>
+              ) : null}
             </IconButton>
             <IconButton
-              className={clsx('mdx-grid__scroll-button')}
+              className={clsx(
+                'mdx-grid__scroll-button',
+                rightLabel?.length && 'mdx-grid__scroll-button--with-label',
+              )}
               size="small"
-              onClick={scroll.bind(null, 1)}
+              onClick={scroll.bind(null, +1)}
             >
-              {rightLabel?.length && rightLabel}
+              {rightLabel.length ? (
+                <span className="mdx-grid__scroll-button-label">
+                  {rightLabel}
+                </span>
+              ) : null}
               <ChevronRightIcon />
             </IconButton>
           </IconButtonGroup>
@@ -101,14 +115,7 @@ 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;
-    }
+    margin-left: auto;
   }
 
   .mdx-grid__scroll--spacing-buttons {
@@ -118,16 +125,14 @@ const GridRoot = styled.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 {
-    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 {
@@ -197,9 +202,38 @@ const GridRoot = styled.div<{
             scroll-snap-type: x mandatory;
           }
         `}
+
+        ${bp.scrollButtons === false &&
+        css`
+          .mdx-grid__scroll {
+            display: none;
+          }
+        `}
       `)
     })}
 
+  ${(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,
@@ -207,8 +241,6 @@ const GridRoot = styled.div<{
       'down',
     )(css`
       .mdx-grid__scroll {
-        display: ${props.xs?.scrollButtons ? 'flex' : 'none'};
-
         & > div {
           justify-content: flex-end;
 
@@ -218,15 +250,7 @@ const GridRoot = styled.div<{
         }
       }
 
-      .mdx-grid__scroll-button {
-        width: 28px;
-      }
-
-      .mdx-grid__scroll-button--left {
-        display: none;
-      }
-
-      .mdx-grid__scroll-button--right {
+      .mdx-grid__scroll-button-label {
         display: none;
       }
     `)}

packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx

@@ -11,14 +11,12 @@ export type RoadmapProps = Omit<
 > & {
   title: React.ReactNode
   description?: React.ReactNode
-  alignment?: 'top' | 'bottom'
   timeline?: Partial<TimelineItemProps>[]
 }
 
 export const Roadmap: React.FC<RoadmapProps> = ({
   title,
   description,
-  alignment = 'bottom',
   timeline = [],
   className,
   children,
@@ -26,14 +24,20 @@ export const Roadmap: React.FC<RoadmapProps> = ({
 }) => {
   const currentYear = new Date().getFullYear()
 
-  const handleBorderStyle = (year: number, isLast: boolean) => {
-    if (year === currentYear) {
-      return 'solid'
-    } else if (isLast) {
+  const handleBorderStyle = (item, index, array) => {
+    if (index === array.length - 1) {
       return 'none'
-    } else return 'dashed'
-  }
+    }
 
+    const currentYear = item.period[0]
+    const nextYear = array[index + 1].period[0]
+
+    if (currentYear === nextYear) {
+      return 'solid'
+    }
+
+    return 'dashed'
+  }
   const getCurrentQuarter = () => {
     const month = new Date().getMonth()
     return 'Q' + Math.ceil((month + 1) / 3)
@@ -67,14 +71,7 @@ export const Roadmap: React.FC<RoadmapProps> = ({
   }
 
   return (
-    <div
-      className={clsx(
-        className,
-        'mdx-roadmap',
-        `mdx-roadmap--${alignment}-aligned`,
-      )}
-      {...props}
-    >
+    <div className={clsx(className, 'mdx-roadmap')} {...props}>
       <div className="mdx-roadmap__header">
         <Typography component="h2" variant="h6">
           {title}
@@ -90,7 +87,7 @@ export const Roadmap: React.FC<RoadmapProps> = ({
         <Grid
           className="mdx-roadmap__timeline"
           xs={{ cols: 6, wrap: false, gap: '0 1rem', scrollButtons: true }}
-          spacingButtons
+          spacingButtons={true}
           leftLabel="Past"
           rightLabel="Future"
         >
@@ -98,14 +95,10 @@ export const Roadmap: React.FC<RoadmapProps> = ({
             <Grid.Item key={index} xs={1}>
               <TimelineItem
                 {...item}
-                index={item.index ?? index + 1}
+                index={index}
                 period={item.period ?? currentYear}
                 description={item.description}
-                alignment={alignment}
-                borderStyle={handleBorderStyle(
-                  item?.period?.[0] ?? currentYear,
-                  index === timeline.length - 1,
-                )}
+                borderStyle={handleBorderStyle(item, index, timeline)}
                 periodStyle={handlePeriodStyle(item?.period ?? currentYear)}
                 className={clsx('mdx-roadmap__timeline-item', item.className)}
               />

packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss

@@ -3,6 +3,8 @@
 
 .mdx-timeline-item {
   width: 236px;
+  min-height: 306px;
+  justify-content: space-between;
   gap: 1rem;
   flex: 0 0 auto;
   display: flex;
@@ -64,14 +66,6 @@
   }
 }
 
-.mdx-timeline-item--top-aligned {
-}
-
-.mdx-timeline-item--bottom-aligned {
-  min-height: 308px;
-  justify-content: space-between;
-}
-
 .mdx-timeline-item__description {
   margin-top: auto;
 }

packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.tsx

@@ -9,8 +9,6 @@ export type TimelineItemProps = Omit<
 > & {
   /** The index or label of the timeline item. */
   index: React.ReactNode
-  /** 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: [number, 'Q1' | 'Q2' | 'Q3' | 'Q4' | '+'] | number
   /** The description or content of the timeline item. */
@@ -90,7 +88,6 @@ export const TimelineItem: React.FC<TimelineItemProps> = ({
   index,
   period,
   description,
-  alignment = 'top',
   borderStyle,
   periodStyle,
   className,
@@ -102,7 +99,6 @@ export const TimelineItem: React.FC<TimelineItemProps> = ({
       className={clsx(
         className,
         'mdx-timeline-item',
-        `mdx-timeline-item--${alignment}-aligned`,
         borderStyle === 'dashed' && 'mdx-timeline-item--border-dashed',
       )}
       {...props}