From f796d0f358d259a9b6210bcd5a1801a925507494 Mon Sep 17 00:00:00 2001
From: Tero Tikkanen <tero.tikkanen@gmail.com>
Date: Fri, 29 Nov 2024 12:45:22 +0200
Subject: [PATCH] Add group headers on catList cards

---
 app/[domain]/[lang]/[plan]/layout.tsx         |  2 +-
 components/paths/CategoryCard.tsx             |  6 ++++--
 components/paths/PathsPageContent.tsx         |  1 -
 components/paths/StreamField.tsx              |  7 ++++---
 .../paths/contentblocks/CategoryListBlock.tsx | 20 +++++++++++--------
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/[domain]/[lang]/[plan]/layout.tsx b/app/[domain]/[lang]/[plan]/layout.tsx
index 2642203f..215b26ef 100644
--- a/app/[domain]/[lang]/[plan]/layout.tsx
+++ b/app/[domain]/[lang]/[plan]/layout.tsx
@@ -98,7 +98,7 @@ async function getPathsData(pathsInstance: string) {
       getPathsInstance(pathsInstance)
     );
     if (pathsData?.instance) {
-      console.log('pathsData', pathsData);
+      // console.log('pathsData', pathsData);
       return pathsData;
     } else return { instance: { id: 'unknown' } };
   }
diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx
index 88f9c41d..5582160d 100644
--- a/components/paths/CategoryCard.tsx
+++ b/components/paths/CategoryCard.tsx
@@ -17,10 +17,12 @@ import PathsNodeSummary from './PathsNodeSummary';
 const GroupIdentifierHeader = styled.div<{
   $color?: string | null | undefined;
 }>`
-  background-color: ${(props) => props.$color};
-  color: ${(props) => readableColor(props.$color || '#ffffff')};
+  background-color: ${(props) => props.$color || props.theme.themeColors.dark};
+  color: ${(props) =>
+    readableColor(props.$color || props.theme.themeColors.dark)};
   padding: 6px;
   margin-bottom: ${(props) => props.theme.spaces.s100};
+  line-height: ${(props) => props.theme.lineHeightSm};
 `;
 
 const Card = styled.div`
diff --git a/components/paths/PathsPageContent.tsx b/components/paths/PathsPageContent.tsx
index a016e7df..321d0d19 100644
--- a/components/paths/PathsPageContent.tsx
+++ b/components/paths/PathsPageContent.tsx
@@ -52,7 +52,6 @@ const PathsPageContent = ({
   page: GeneralPlanPage;
   pageSectionColor?: string;
 }) => {
-  console.log('page', page);
   const isCategoryPage = page.__typename === 'CategoryPage';
   const isStaticPage = page.__typename === 'StaticPage';
   const isActionListPage = page.__typename === 'ActionListPage';
diff --git a/components/paths/StreamField.tsx b/components/paths/StreamField.tsx
index 1e9749e5..7957102d 100644
--- a/components/paths/StreamField.tsx
+++ b/components/paths/StreamField.tsx
@@ -30,7 +30,7 @@ type StreamFieldBlockProps = {
 function StreamFieldBlock(props: StreamFieldBlockProps) {
   const { id, page, block } = props;
   const { __typename } = block;
-  console.log('rendering', props);
+
   switch (__typename) {
     case 'ActionListBlock': {
       const { categoryFilter, groupByCategoryLevel, heading, helpText } = block;
@@ -48,13 +48,14 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
       const { heading, lead, categoryType, category } = block;
       const { category: pageCategory } = page;
       let categories;
-
+      let group: typeof category | undefined = undefined;
       /* If the block specifies a category type, use cats from there.
        * Otherwise, fall back on the containing page's sub-categories.
        * If even that doesn't work, use plan's main categories.
        */
       if (category) {
         categories = category.children;
+        group = category.id === pageCategory.id ? pageCategory : undefined;
       } else if (categoryType) {
         categories = categoryType.categories.filter(
           (cat) => cat.parent == null
@@ -66,6 +67,7 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
         <CategoryListBlock
           id={id}
           categories={categories}
+          group={group}
           heading={heading ?? undefined}
           lead={lead}
         />
@@ -80,7 +82,6 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
         groupByCategoryLevel,
         categoryBlockType,
       } = block;
-      console.log('CategoryLevelListBlock', block);
 
       const allPlanCategories = categoryBlockType?.categories;
       const categories = allPlanCategories
diff --git a/components/paths/contentblocks/CategoryListBlock.tsx b/components/paths/contentblocks/CategoryListBlock.tsx
index d3a54d94..26a64ed2 100644
--- a/components/paths/contentblocks/CategoryListBlock.tsx
+++ b/components/paths/contentblocks/CategoryListBlock.tsx
@@ -21,7 +21,7 @@ const CategoryListSection = styled.div`
     props.theme.section.categoryList?.color || props.theme.neutralDark};
 `;
 
-const CategoryList = ({ categories, pathsInstance }) => (
+const CategoryList = ({ categories, pathsInstance, group }) => (
   <Row>
     {categories
       ?.filter((cat) => cat?.categoryPage?.live)
@@ -36,10 +36,9 @@ const CategoryList = ({ categories, pathsInstance }) => (
         >
           <CategoryCard
             category={cat}
+            group={group}
             pathsInstance={pathsInstance}
-            onLoaded={(id, impact) => {
-              console.log(`Category ${id} loaded with impact: ${impact}`);
-            }}
+            onLoaded={() => void 0}
           />
         </Col>
       ))}
@@ -49,23 +48,28 @@ const CategoryList = ({ categories, pathsInstance }) => (
 interface CategoryListBlockProps extends CommonContentBlockProps {
   categories?: Array<CategoryFragmentFragment>;
   heading?: string;
-  lead: string;
+  lead?: string | null;
   style?: 'treemap' | 'cards';
+  group?: CategoryFragmentFragment;
 }
 
 const CategoryListBlock = (props: CategoryListBlockProps) => {
   const fallbackCategories = useFallbackCategories();
   const paths = usePaths();
-  const { id = '', categories = fallbackCategories, heading } = props;
+  const { id = '', categories = fallbackCategories, heading, group } = props;
 
-  const pathsInstance = paths?.instance?.id;
+  const pathsInstance = paths?.instance;
 
   return (
     <CategoryListSection id={id}>
       <Container>
         {heading && <h4>{heading}</h4>}
         <Suspense fallback={<div>Loading...</div>}>
-          <CategoryList categories={categories} pathsInstance={pathsInstance} />
+          <CategoryList
+            categories={categories}
+            pathsInstance={pathsInstance}
+            group={group}
+          />
         </Suspense>
       </Container>
     </CategoryListSection>