Skip to content

Commit

Permalink
Add group headers on catList cards
Browse files Browse the repository at this point in the history
  • Loading branch information
terotik committed Nov 29, 2024
1 parent 7bce9af commit f796d0f
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 15 deletions.
2 changes: 1 addition & 1 deletion app/[domain]/[lang]/[plan]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' } };
}
Expand Down
6 changes: 4 additions & 2 deletions components/paths/CategoryCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
1 change: 0 additions & 1 deletion components/paths/PathsPageContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
7 changes: 4 additions & 3 deletions components/paths/StreamField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -66,6 +67,7 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
<CategoryListBlock
id={id}
categories={categories}
group={group}
heading={heading ?? undefined}
lead={lead}
/>
Expand All @@ -80,7 +82,6 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
groupByCategoryLevel,
categoryBlockType,
} = block;
console.log('CategoryLevelListBlock', block);

const allPlanCategories = categoryBlockType?.categories;
const categories = allPlanCategories
Expand Down
20 changes: 12 additions & 8 deletions components/paths/contentblocks/CategoryListBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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>
))}
Expand All @@ -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>
Expand Down

0 comments on commit f796d0f

Please sign in to comment.