Merge pull request #171 from kausaltech/feat/templateable-category-main

Support templateable category page main content
kausaltech · Sep 26, 2023 · 34cf4a5 · 34cf4a5
2 parents 9905ca6 + d105779
commit 34cf4a5
Show file tree

Hide file tree

Showing 9 changed files with 483 additions and 133 deletions.
diff --git a/common/__generated__/graphql.ts b/common/__generated__/graphql.ts
diff --git a/components/actions/ActionContent.tsx b/components/actions/ActionContent.tsx
@@ -17,7 +17,7 @@ import PopoverTip from 'components/common/PopoverTip';
 import IndicatorCausalVisualisation from 'components/indicators/IndicatorCausalVisualisation';
 import AttributesBlock from 'components/common/AttributesBlock';
 import CategoryTags from './CategoryTags';
-import ActionContactFormBlock from 'components/contentblocks/ActionContactFormBlock';
+import ExpandableFeedbackFormBlock from 'components/contentblocks/ExpandableFeedbackFormBlock';
 import ActionPhase from './ActionPhase';
 import ActionStatus from './ActionStatus';
 import ActionImpact from './ActionImpact';
@@ -491,7 +491,7 @@ function ActionContentBlock(props: ActionContentBlockProps) {
         />
       );
     case 'ActionContactFormBlock': {
-      return <ActionContactFormBlock {...block} action={action} />;
+      return <ExpandableFeedbackFormBlock {...block} action={action} />;
     }
     case 'ActionContentCategoryTypeBlock': {
       const categories = action.categories.filter(

diff --git a/components/categories/CategoryPageContent.tsx b/components/categories/CategoryPageContent.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import { Container, Row } from 'reactstrap';
+import styled, { css } from 'styled-components';
+
+import StreamField from 'components/common/StreamField';
+import { GetPlanPageGeneralQuery } from 'common/__generated__/graphql';
+import CategoryPageStreamField, {
+  checkAttributeHasValueByType,
+} from 'components/common/CategoryPageStreamField';
+
+type GeneralPlanPage = NonNullable<GetPlanPageGeneralQuery['planPage']>;
+
+type CategoryPage = { __typename: 'CategoryPage' } & GeneralPlanPage;
+
+const MainContent = styled.div``;
+
+const AsideContent = styled.div`
+  position: sticky;
+  top: ${({ theme }) => theme.spaces.s200};
+  flex: 0 1 300px;
+  width: 300px;
+  background-color: ${({ theme }) => theme.themeColors.white};
+  border-radius: ${({ theme }) => theme.cardBorderRadius};
+  padding: ${({ theme }) => theme.spaces.s100} 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+`;
+
+const columnLayout = css`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: ${({ theme }) => `0 ${theme.spaces.s200} ${theme.spaces.s200}`};
+  gap: ${({ theme }) => theme.spaces.s300};
+
+  ${MainContent} {
+    flex: 0 2 800px;
+    padding: 0 ${({ theme }) => theme.spaces.s100};
+    background-color: ${({ theme }) => theme.themeColors.white};
+    border-radius: ${({ theme }) => theme.cardBorderRadius};
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpointLg}) {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: stretch;
+
+    ${MainContent}, ${AsideContent} {
+      position: relative;
+      top: 0;
+      flex: 1 0 auto;
+      width: 100%;
+      max-width: ${({ theme }) => theme.breakpointMd};
+      margin: 0 auto;
+    }
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpointMd}) {
+    gap: ${({ theme }) => theme.spaces.s150};
+  }
+
+  @media (max-width: ${({ theme }) => theme.breakpointSm}) {
+    padding: ${({ theme }) => `0 ${theme.spaces.s050} ${theme.spaces.s050}`};
+  }
+`;
+
+const ContentArea = styled.div<{
+  $columnLayout: boolean;
+  $backgroundColor?: string;
+}>`
+  ${({ $columnLayout }) => $columnLayout && columnLayout};
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+`;
+
+const CategoryPageContent = ({
+  page,
+  pageSectionColor,
+}: {
+  page: CategoryPage;
+  pageSectionColor: string;
+}) => {
+  const hasMainContentTemplate = !!page.layout?.layoutMainBottom;
+  const hasAsideTemplate = !!page.layout?.layoutAside;
+  const hasAside =
+    hasAsideTemplate &&
+    page.layout?.layoutAside?.some((block) =>
+      checkAttributeHasValueByType(block.attributeType.identifier, page)
+    );
+
+  return (
+    <ContentArea
+      $columnLayout={hasAside}
+      $backgroundColor={hasAside ? pageSectionColor : undefined}
+    >
+      <MainContent>
+        {hasMainContentTemplate
+          ? page.layout?.layoutMainBottom?.map((block, i) => (
+              <CategoryPageStreamField
+                key={i}
+                page={page}
+                block={block}
+                hasAsideColumn={hasAside}
+              />
+            ))
+          : page.body && (
+              <StreamField
+                page={page}
+                blocks={page.body}
+                color={pageSectionColor}
+              />
+            )}
+      </MainContent>
+
+      {hasAside && (
+        <AsideContent>
+          <Container>
+            {page.layout?.layoutAside?.map((block, i) => (
+              <Row key={i}>
+                <CategoryPageStreamField
+                  page={page}
+                  block={block}
+                  context="aside"
+                  columnProps={{ md: 12 }}
+                />
+              </Row>
+            ))}
+          </Container>
+        </AsideContent>
+      )}
+    </ContentArea>
+  );
+};
+
+export default CategoryPageContent;