Add four columns option to {.people-rows}

owid · Dec 12, 2024 · 08c9ab2 · 08c9ab2
1 parent 39b5c25
commit 08c9ab2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
@@ -258,7 +258,7 @@ export type EnrichedBlockNumberedList = {
 export type RawBlockPeopleRows = {
     type: "people-rows"
     value: {
-        columns: "2"
+        columns: "2" | "4"
         people: RawBlockPerson[]
     }
 }
@@ -281,7 +281,7 @@ export type RawBlockPerson = {
 
 export type EnrichedBlockPeopleRows = {
     type: "people-rows"
-    columns: "2"
+    columns: "2" | "4"
     people: EnrichedBlockPerson[]
 } & EnrichedBlockWithParseErrors
 

diff --git a/site/gdocs/components/People.scss b/site/gdocs/components/People.scss
@@ -13,3 +13,15 @@
         }
     }
 }
+
+.people-cols-4 {
+    @include lg-up {
+        .article-block__text {
+            @include body-3-medium;
+        }
+
+        .person-socials {
+            @include body-3-medium;
+        }
+    }
+}
diff --git a/site/gdocs/components/People.tsx b/site/gdocs/components/People.tsx
@@ -7,15 +7,18 @@ export default function People({
     children,
 }: {
     className?: string
-    columns?: "2"
+    columns?: "2" | "4"
     children: React.ReactNode
 }) {
     return (
         <div
             className={cx(
-                "people grid-cols-2",
+                "people",
                 {
-                    "people-cols-2 grid-md-cols-1": columns === "2",
+                    "grid-cols-2": !columns,
+                    "people-cols-2 grid-cols-2 grid-md-cols-1": columns === "2",
+                    "people-cols-4 grid-cols-4 grid-lg-cols-2 grid-sm-cols-1":
+                        columns === "4",
                 },
                 className
             )}