Add support for category page sidebars

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;

components/common/CategoryPageStreamField.tsx

@@ -27,10 +27,10 @@ type OmitFields<T> = OmitUnion<
 
 interface WrapperProps {
   children: React.ReactNode;
-  withContainer: boolean;
+  withContainer?: boolean;
 }
 
-const Wrapper = ({ children, withContainer }: WrapperProps) =>
+const Wrapper = ({ children, withContainer = true }: WrapperProps) =>
   withContainer ? (
     <Container>
       <Row>{children}</Row>
@@ -46,34 +46,65 @@ const DEFAULT_COL_PROPS = {
   className: 'my-4',
 };
 
+const TIGHT_COL_PROPS = {
+  xl: { size: 8, offset: 2 },
+  lg: { size: 10, offset: 1 },
+  md: { size: 12 },
+  className: 'my-4',
+};
+
 interface Props {
   page: CategoryPage;
   context?: 'hero' | 'main' | 'aside';
+  /** Passed down to reactstrap Col components */
+  columnProps?: any;
+  hasAsideColumn?: boolean;
   block:
     | OmitFields<CategoryPageMainTopBlock>
     | OmitFields<CategoryPageMainBottomBlock>;
 }
 
+const findAttributeByType = (attributeTypeIdentifier: string, page) =>
+  page.category?.attributes?.find(
+    (attribute) => attribute.type.identifier === attributeTypeIdentifier
+  );
+
+export const checkAttributeHasValueByType = (
+  attributeTypeIdentifier: string,
+  page
+) => {
+  const attribute = findAttributeByType(attributeTypeIdentifier, page);
+
+  return attribute && attributeHasValue(attribute);
+};
+
 export const CategoryPageStreamField = ({
   block,
   page,
   context = 'main',
+  columnProps: customColumnProps,
+  hasAsideColumn = false,
 }: Props) => {
   const theme = useTheme();
   const plan = usePlan();
+  const columnProps =
+    context === 'main' && hasAsideColumn ? TIGHT_COL_PROPS : DEFAULT_COL_PROPS;
 
   switch (block.__typename) {
     case 'CategoryPageAttributeTypeBlock': {
       const withContainer = context === 'main';
-      const attribute = page.category?.attributes?.find(
-        (attribute) =>
-          attribute.type.identifier === block.attributeType.identifier
+      const attribute = findAttributeByType(
+        block.attributeType.identifier,
+        page
       );
 
       if (attribute && attributeHasValue(attribute)) {
         return (
           <Wrapper withContainer={withContainer}>
-            <Col {...(withContainer ? DEFAULT_COL_PROPS : { md: 6 })}>
+            <Col
+              {...(withContainer ? columnProps : { md: 6 })}
+              {...customColumnProps}
+            >
               <ActionAttribute
                 attribute={attribute}
                 attributeType={undefined}
@@ -88,8 +119,8 @@ export const CategoryPageStreamField = ({
 
     case 'CategoryPageContactFormBlock': {
       return (
-        <Wrapper withContainer>
-          <Col {...DEFAULT_COL_PROPS}>
+        <Wrapper>
+          <Col {...columnProps} {...customColumnProps}>
             <ExpandableFeedbackFormBlock
               heading={block.heading || undefined}
               description={block.description || undefined}
@@ -106,7 +137,7 @@ export const CategoryPageStreamField = ({
 
       return (
         <Wrapper withContainer={context === 'main'}>
-          <Col xs={12}>
+          <Col xs={12} {...customColumnProps}>
             <CategoryMetaBar category={page.category.id} />
           </Col>
         </Wrapper>
@@ -119,7 +150,15 @@ export const CategoryPageStreamField = ({
         page.category?.parent?.color ||
         theme.brandLight;
 
-      return <StreamField page={page} blocks={page.body} color={color} />;
+      return (
+        <StreamField
+          page={page}
+          blocks={page.body}
+          color={color}
+          hasSidebar={hasAsideColumn}
+          columnProps={columnProps}
+        />
+      );
     }
 
     case 'CategoryPageCategoryListBlock': {

components/common/StreamField.tsx

@@ -281,10 +281,11 @@ type StreamFieldBlockProps = {
   block: StreamFieldFragmentFragment;
   color: string;
   hasSidebar: boolean;
+  columnProps?: any;
 };
 
 function StreamFieldBlock(props: StreamFieldBlockProps) {
-  const { id, page, block, color, hasSidebar } = props;
+  const { id, page, block, color, hasSidebar, columnProps } = props;
   const { __typename } = block;
   const plan = useContext(PlanContext);
   const theme = useTheme();
@@ -304,6 +305,7 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
               lg={{ size: 8, offset: hasSidebar ? 4 : 2 }}
               md={{ size: 10, offset: 1 }}
               className="my-4"
+              {...columnProps}
             >
               <RichText html={value} isCollapsible={isCollapsible} />
             </Col>
@@ -332,7 +334,7 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
       return (
         <Container id={id}>
           <Row>
-            <Col>
+            <Col {...columnProps}>
               <div>{value}</div>
             </Col>
           </Row>
@@ -456,6 +458,7 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
               lg={{ size: 8, offset: hasSidebar ? 4 : 2 }}
               md={{ size: 10, offset: 1 }}
               className="my-4"
+              {...columnProps}
             >
               <div dangerouslySetInnerHTML={{ __html: block.embed.html }}></div>
             </Col>
@@ -506,10 +509,11 @@ interface StreamFieldProps {
   page: any;
   blocks: any;
   hasSidebar?: boolean;
+  columnProps?: any;
 }
 
 function StreamField(props: StreamFieldProps) {
-  const { page, blocks, color, hasSidebar = false } = props;
+  const { page, blocks, color, hasSidebar = false, columnProps } = props;
 
   return (
     <>
@@ -521,6 +525,7 @@ function StreamField(props: StreamFieldProps) {
           key={block.id}
           color={color}
           hasSidebar={hasSidebar}
+          columnProps={columnProps}
         />
       ))}
     </>