feat: add alignment options for feature list and roadmap components

acid-info · Jul 13, 2023 · 4053a0b · 4053a0b
1 parent cfae78a
commit 4053a0b
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 10 deletions.
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
@@ -6,6 +6,32 @@
   position: relative;
 }
 
+.mdx-feature-list--top-aligned {
+}
+
+.mdx-feature-list--bottom-aligned {
+  @include utils.responsive('lg', 'up') {
+    .mdx-feature-list__feature {
+      min-height: 332px;
+    }
+
+    .mdx-feature-list__feature-description {
+      flex: 1 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.mdx-feature-list--top-aligned {
+  @include utils.responsive('lg', 'up') {
+    .mdx-feature-list__feature-description {
+      margin-top: 136px;
+    }
+  }
+}
+
 .mdx-feature-list__title {
   padding: 24px 0;
 }
@@ -41,10 +67,6 @@
 }
 
 .mdx-feature-list__feature-description {
-  flex: 1 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
 }
 
 .mdx-feature-list__extra {
@@ -56,7 +78,6 @@
   .mdx-feature-list__feature {
     padding: 1rem;
     position: relative;
-    min-height: 332px;
   }
 
   .mdx-feature-list__feature-inner {

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
@@ -14,17 +14,26 @@ export type FeatureListProps = Omit<
 > & {
   title?: React.ReactNode
   features?: Feature[]
+  alignment?: 'bottom' | 'top'
 }
 
 export const FeatureList: React.FC<FeatureListProps> = ({
   title = 'Features',
+  alignment = 'bottom',
   features = [],
   className,
   children,
   ...props
 }) => {
   return (
-    <div className={clsx(className, 'mdx-feature-list')} {...props}>
+    <div
+      className={clsx(
+        className,
+        'mdx-feature-list',
+        `mdx-feature-list--${alignment}-aligned`,
+      )}
+      {...props}
+    >
       <Typography
         variant="h6"
         component="h1"

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
@@ -38,12 +38,10 @@
 
 .mdx-roadmap__timeline-item {
   width: 236px;
-  min-height: 308px;
   gap: 1rem;
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   padding-bottom: 23px;
   border-bottom: 1px solid rgb(var(--lsd-border-primary));
   scroll-snap-align: start !important;
@@ -89,6 +87,16 @@
   }
 }
 
+.mdx-roadmap--top-aligned {
+}
+
+.mdx-roadmap--bottom-aligned {
+  .mdx-roadmap__timeline-item {
+    min-height: 308px;
+    justify-content: space-between;
+  }
+}
+
 @include utils.responsive('lg', 'down') {
   .mdx-roadmap__header {
     flex-direction: column;
@@ -104,7 +112,6 @@
 
   .mdx-roadmap__timeline-item {
     width: 204px;
-    min-height: 306px;
   }
 }
 

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
@@ -22,11 +22,13 @@ export type RoadmapProps = Omit<
   title: React.ReactNode
   description?: React.ReactNode
   timeline?: TimelineItem[]
+  alignment?: 'top' | 'bottom'
 }
 
 export const Roadmap: React.FC<RoadmapProps> = ({
   title,
   description,
+  alignment = 'bottom',
   timeline = [],
   className,
   children,
@@ -48,7 +50,14 @@ export const Roadmap: React.FC<RoadmapProps> = ({
   }
 
   return (
-    <div className={clsx(className, 'mdx-roadmap')} {...props}>
+    <div
+      className={clsx(
+        className,
+        'mdx-roadmap',
+        `mdx-roadmap--${alignment}-aligned`,
+      )}
+      {...props}
+    >
       <div className="mdx-roadmap__header">
         <Typography component="h2" variant="h6">
           {title}