From bd17287b028445029c7e26c8582333e081008638 Mon Sep 17 00:00:00 2001
From: Dan Lemon <daniel.lemon@amazeelabs.com>
Date: Wed, 16 Oct 2024 17:24:32 +0200
Subject: [PATCH 1/6] chore(SLB-455): add subgrid to card layout

---
 packages/ui/src/components/Organisms/Card.tsx             | 8 ++++----
 packages/ui/src/components/Organisms/ContentHub.tsx       | 4 ++--
 .../components/Organisms/PageContent/BlockTeaserList.tsx  | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Card.tsx b/packages/ui/src/components/Organisms/Card.tsx
index ec4bad862..639264212 100644
--- a/packages/ui/src/components/Organisms/Card.tsx
+++ b/packages/ui/src/components/Organisms/Card.tsx
@@ -16,9 +16,9 @@ export const CardItem = ({
   return (
     <article
       aria-labelledby={formattedID}
-      className="focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 relative max-w-sm bg-white rounded-lg hover:shadow overflow-hidden flex flex-col-reverse"
+      className="focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 relative max-w-sm bg-white rounded-lg hover:shadow grid grid-rows-[auto_1fr] gap-4 p-4"
     >
-      <div className="p-5">
+      <div className="p-5 grid grid-rows-[auto_1fr_auto] gap-4">
         <h5
           id={formattedID}
           className="mb-2 text-2xl font-bold tracking-tight text-gray-900"
@@ -28,7 +28,7 @@ export const CardItem = ({
         {hero?.headline ? <div>{hero?.headline}</div> : null}
         <Link
           href={path}
-          className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-blue-700 border border-blue-700 rounded-lg hover:bg-blue-800 hover:text-white focus:outline-offset-4 after:content-[''] after:absolute after:inset-0"
+          className="row-start-3 justify-self-start inline-flex items-center px-3 py-2 text-sm font-medium text-center text-blue-700 border border-blue-700 rounded-lg hover:bg-blue-800 hover:text-white focus:outline-offset-4 after:content-[''] after:absolute after:inset-0"
         >
           <span className="sr-only w-0 h-0 overflow-hidden">{title}</span>
           {readMoreText ||
@@ -53,7 +53,7 @@ export const CardItem = ({
           </svg>
         </Link>
       </div>
-      <div className="rounded-t-lg">
+      <div className="rounded-t-lg row-start-1">
         {teaserImage ? (
           <Image {...teaserImage} className="w-full" />
         ) : (
diff --git a/packages/ui/src/components/Organisms/ContentHub.tsx b/packages/ui/src/components/Organisms/ContentHub.tsx
index ca3b325c9..6d9361a45 100644
--- a/packages/ui/src/components/Organisms/ContentHub.tsx
+++ b/packages/ui/src/components/Organisms/ContentHub.tsx
@@ -50,10 +50,10 @@ export function ContentHub({ pageSize = 10 }: { pageSize: number }) {
         ) : null}
         {data?.contentHub.total ? (
           <>
-            <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+            <ul className="my-8 grid gap-4 lg:gap-8 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr grid-rows-subgrid">
               {data?.contentHub.items.filter(isTruthy).map((item) => {
                 return (
-                  <li key={item.path}>
+                  <li key={item.path} className="grid grid-rows-subgrid">
                     <CardItem {...item} />
                   </li>
                 );
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx b/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx
index 640d0d558..d329a7663 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx
@@ -29,11 +29,11 @@ export function BlockTeaserList(props: BlockTeaserListFragment) {
   return (
     <div className="bg-white py-12 px-6 lg:px-8">
       <div className="mx-auto max-w-6xl">
-        <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+        <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8 grid-cols-subgrid">
           {props.staticContent?.map((teaserItem) => {
             staticIds.push(getUUIDFromId(teaserItem?.content?.id || ''));
             return teaserItem?.content ? (
-              <li key={teaserItem?.content?.id}>
+              <li key={teaserItem?.content?.id} className="grid grid-rows-subgrid">
                 <CardItem
                   readMoreText={props.buttonText}
                   {...teaserItem?.content}
@@ -76,7 +76,7 @@ export function DynamicTeaserList(
       <>
         {data.teaserList.items.map((teaserItem) => {
           return teaserItem ? (
-            <li key={teaserItem.id}>
+            <li key={teaserItem.id} className="grid grid-rows-subgrid">
               <CardItem readMoreText={props.buttonText} {...teaserItem} />
             </li>
           ) : null;

From d876cba3dae1dd209cad25f5719849ac2cd00f2b Mon Sep 17 00:00:00 2001
From: Dan Lemon <daniel.lemon@amazeelabs.com>
Date: Wed, 16 Oct 2024 17:30:35 +0200
Subject: [PATCH 2/6] chore: fix formatting...

---
 .../src/components/Organisms/PageContent/BlockTeaserList.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx b/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx
index d329a7663..bebf386e6 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx
@@ -33,7 +33,10 @@ export function BlockTeaserList(props: BlockTeaserListFragment) {
           {props.staticContent?.map((teaserItem) => {
             staticIds.push(getUUIDFromId(teaserItem?.content?.id || ''));
             return teaserItem?.content ? (
-              <li key={teaserItem?.content?.id} className="grid grid-rows-subgrid">
+              <li
+                key={teaserItem?.content?.id}
+                className="grid grid-rows-subgrid"
+              >
                 <CardItem
                   readMoreText={props.buttonText}
                   {...teaserItem?.content}

From b042663d557a1f4842290fdaffd08647d359ca1e Mon Sep 17 00:00:00 2001
From: Dan Lemon <daniel.lemon@amazeelabs.com>
Date: Thu, 24 Oct 2024 12:58:16 +0200
Subject: [PATCH 3/6] chore(SLB-455): remove padding, gap, and offset from
 cards

---
 packages/ui/src/components/Organisms/Card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Organisms/Card.tsx b/packages/ui/src/components/Organisms/Card.tsx
index 639264212..14f691ee8 100644
--- a/packages/ui/src/components/Organisms/Card.tsx
+++ b/packages/ui/src/components/Organisms/Card.tsx
@@ -16,7 +16,7 @@ export const CardItem = ({
   return (
     <article
       aria-labelledby={formattedID}
-      className="focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 relative max-w-sm bg-white rounded-lg hover:shadow grid grid-rows-[auto_1fr] gap-4 p-4"
+      className="focus-within:outline focus-within:outline-2 focus-within:outline-indigo-600 relative max-w-sm bg-white rounded-lg hover:shadow grid grid-rows-[auto_1fr]"
     >
       <div className="p-5 grid grid-rows-[auto_1fr_auto] gap-4">
         <h5

From 03f5ccc6af5375111d5158dd8a245c31c150035d Mon Sep 17 00:00:00 2001
From: Dan Lemon <daniel.lemon@amazeelabs.com>
Date: Thu, 24 Oct 2024 13:01:17 +0200
Subject: [PATCH 4/6] chore(SLB-455): set rounded on img directly

---
 packages/ui/src/components/Organisms/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Card.tsx b/packages/ui/src/components/Organisms/Card.tsx
index 14f691ee8..398e21cf3 100644
--- a/packages/ui/src/components/Organisms/Card.tsx
+++ b/packages/ui/src/components/Organisms/Card.tsx
@@ -53,9 +53,9 @@ export const CardItem = ({
           </svg>
         </Link>
       </div>
-      <div className="rounded-t-lg row-start-1">
+      <div className="row-start-1">
         {teaserImage ? (
-          <Image {...teaserImage} className="w-full" />
+          <Image {...teaserImage} className="w-full rounded-t-lg" />
         ) : (
           <div className="aspect-[4/3] bg-indigo-200" />
         )}

From f176282d4f499585993b9ffae651cbb40f502d8f Mon Sep 17 00:00:00 2001
From: Dan Lemon <daniel.lemon@amazeelabs.com>
Date: Thu, 24 Oct 2024 15:53:25 +0200
Subject: [PATCH 5/6] chore(SLB-455): try aspect-ratio 16 by 9 for images on
 cards

---
 packages/ui/src/components/Organisms/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Organisms/Card.tsx b/packages/ui/src/components/Organisms/Card.tsx
index 398e21cf3..f9b774782 100644
--- a/packages/ui/src/components/Organisms/Card.tsx
+++ b/packages/ui/src/components/Organisms/Card.tsx
@@ -55,9 +55,9 @@ export const CardItem = ({
       </div>
       <div className="row-start-1">
         {teaserImage ? (
-          <Image {...teaserImage} className="w-full rounded-t-lg" />
+          <Image {...teaserImage} className="w-full aspect-[16/9] rounded-t-lg" />
         ) : (
-          <div className="aspect-[4/3] bg-indigo-200" />
+          <div className="aspect-[16/9] rounded-t-lg bg-indigo-200" />
         )}
       </div>
     </article>

From 37a341885b0e0926c70e3a195a2aa4a197981916 Mon Sep 17 00:00:00 2001
From: Dan Lemon <daniel.lemon@amazeelabs.com>
Date: Fri, 25 Oct 2024 16:51:59 +0200
Subject: [PATCH 6/6] chore: pnpm test:format:fix

---
 packages/ui/src/components/Organisms/Card.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Organisms/Card.tsx b/packages/ui/src/components/Organisms/Card.tsx
index f9b774782..674444f9d 100644
--- a/packages/ui/src/components/Organisms/Card.tsx
+++ b/packages/ui/src/components/Organisms/Card.tsx
@@ -55,7 +55,10 @@ export const CardItem = ({
       </div>
       <div className="row-start-1">
         {teaserImage ? (
-          <Image {...teaserImage} className="w-full aspect-[16/9] rounded-t-lg" />
+          <Image
+            {...teaserImage}
+            className="w-full aspect-[16/9] rounded-t-lg"
+          />
         ) : (
           <div className="aspect-[16/9] rounded-t-lg bg-indigo-200" />
         )}