WIP Add Card Grid layout to List component

Author: webstackdev

src/components/List/index.astro

@@ -33,7 +33,7 @@ const { items, size, variant = 'default', classes } = Astro.props
 
 {variant === 'accent-border-left-list' && <AccentBorderLeftList items={items} classes={classes} />}
 {variant === 'badge-list' && <BadgeList items={items} classes={classes} size={size} />}
-{variant === 'card-grid-list' && <CardGridList items={items} classes={classes} size={size} />}
+{variant === 'card-grid-list' && <CardGridList items={items} classes={classes} />}
 {variant === 'check-icons-list' && <CheckIconsList items={items} classes={classes} size={size} />}
 {variant === 'chevron-list' && <ChevronList items={items} classes={classes} size={size} />}
 {variant === 'colored-marker-list' && <ColoredMarkerList items={items} classes={classes} size={size} />}

src/components/List/layouts/CardGridList.astro

@@ -3,7 +3,6 @@ export type Props = {
   items: {
     lead?: string
     text: string
-    color?: string
   }[]
   classes?: {
     ul?: string
@@ -14,36 +13,18 @@ export type Props = {
 
 const { items, classes }: Props = Astro.props
 
-const ulClass = ["space-y-4", classes?.ul]
-const liClass = ["border-l-4 pl-4 py-2", classes?.li]
+const ulClass = ["grid grid-cols-1 md:grid-cols-2 gap-4", classes?.ul]
+const liClass = ["bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors", classes?.li]
+const emClass = ["block text-content font-semibold not-italic mb-2", classes?.em]
 ---
 
 <ul class:list={ulClass}>
   {
     items.map((item) => (
       <li class:list={liClass}>
-        <em class={classes?.em}>{item.lead}</em>
-        <span>{item.text}</span>
+        <em class:list={emClass}>{item.lead}</em>
+        <span class="text-sm text-content-offset">{item.text}</span>
       </li>
     ))
   }
 </ul>
-
-<ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
-  <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-    <em class="block text-content font-semibold not-italic mb-2">Is the gateway healthy?</em>
-    <span class="text-sm text-content-offset">Request rate, error rate, and latency percentiles answer this instantly.</span>
-  </li>
-  <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-    <em class="block text-content font-semibold not-italic mb-2">Is a specific backend unhealthy?</em>
-    <span class="text-sm text-content-offset">Per-upstream metrics and circuit breaker state tell you.</span>
-  </li>
-  <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-    <em class="block text-content font-semibold not-italic mb-2">Is a specific consumer affected?</em>
-    <span class="text-sm text-content-offset">Consumer-specific labels let you slice the data.</span>
-  </li>
-  <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-    <em class="block text-content font-semibold not-italic mb-2">What happened to this specific request?</em>
-    <span class="text-sm text-content-offset">Trace ID and request ID correlation connect all the pieces.</span>
-  </li>
-</ul>

src/content/articles/demo/index.mdx

@@ -1584,3 +1584,51 @@ Display customer feedback and testimonials:
 </div>
 
 <br />
+
+```markdown
+<List
+  variant="card-grid-list"
+  items={[
+    {
+      lead: "Is the gateway healthy?",
+      text: "Request rate, error rate, and latency percentiles answer this instantly.",
+    },
+    {
+      lead: "Is a specific backend unhealthy?",
+      text: "Per-upstream metrics and circuit breaker state tell you.",
+    },
+    {
+      lead: "Is a specific consumer affected?",
+      text: "Consumer-specific labels let you slice the data.",
+    },
+    {
+      lead: "What happened to this specific request?",
+      text: "Trace ID and request ID correlation connect all the pieces.",
+    },
+  ]}
+/>
+```
+
+<List
+  variant="card-grid-list"
+  items={[
+    {
+      lead: "Is the gateway healthy?",
+      text: "Request rate, error rate, and latency percentiles answer this instantly.",
+    },
+    {
+      lead: "Is a specific backend unhealthy?",
+      text: "Per-upstream metrics and circuit breaker state tell you.",
+    },
+    {
+      lead: "Is a specific consumer affected?",
+      text: "Consumer-specific labels let you slice the data.",
+    },
+    {
+      lead: "What happened to this specific request?",
+      text: "Trace ID and request ID correlation connect all the pieces.",
+    },
+  ]}
+/>
+
+<br />

src/pages/hero.astro

@@ -12,29 +12,6 @@ const path = '/hero/'
 <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-16">
   <h2 class="text-3xl font-bold text-content mb-8 border-b border-trim pb-4">List Style Variations</h2>
 
-  <!-- VARIATION 2: Card Grid -->
-  <div class="max-w-4xl">
-    <p class="text-xs font-bold text-content-offset uppercase tracking-widest mb-4">Variation 2: Card Grid</p>
-    <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-        <em class="block text-content font-semibold not-italic mb-2">Is the gateway healthy?</em>
-        <span class="text-sm text-content-offset">Request rate, error rate, and latency percentiles answer this instantly.</span>
-      </li>
-      <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-        <em class="block text-content font-semibold not-italic mb-2">Is a specific backend unhealthy?</em>
-        <span class="text-sm text-content-offset">Per-upstream metrics and circuit breaker state tell you.</span>
-      </li>
-      <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-        <em class="block text-content font-semibold not-italic mb-2">Is a specific consumer affected?</em>
-        <span class="text-sm text-content-offset">Consumer-specific labels let you slice the data.</span>
-      </li>
-      <li class="bg-page-offset border border-trim rounded-lg p-5 hover:border-primary transition-colors">
-        <em class="block text-content font-semibold not-italic mb-2">What happened to this specific request?</em>
-        <span class="text-sm text-content-offset">Trace ID and request ID correlation connect all the pieces.</span>
-      </li>
-    </ul>
-  </div>
-
   <!-- VARIATION 3: Icon Bullets with Dash Separator -->
   <div class="max-w-3xl">
     <p class="text-xs font-bold text-content-offset uppercase tracking-widest mb-4">Variation 3: Check Icons with Dash Separator</p>