#320 Implement personalized guides

src/build-utils/helpers/contentfulContentModel.js

@@ -25,6 +25,8 @@ const link = `
 
 const linkCollectionModule = `
   heading
+  subheading
+  variant
   image {
     gatsbyImageData(
       formats: WEBP
@@ -124,7 +126,7 @@ const resourceItem = `
 
 const resourceListModule = `
   heading
-  subheading {
+  subheadingRich: subheading {
     raw
   }
   resources {
@@ -277,6 +279,20 @@ const promotionBannerModule = `
   }
 `;
 
+const stepsModule = `
+  steps {
+    ... on Node {
+      id
+      internal {
+        type
+      }
+      ... on ContentfulFaqItem {
+        ${faqItem}
+      }
+    }
+  }
+`;
+
 module.exports = {
   hero,
   seo,
@@ -296,4 +312,5 @@ module.exports = {
   pageData,
   promoLine,
   promotionBannerModule,
+  stepsModule,
 };

src/build-utils/pages/homePage.js

@@ -8,7 +8,10 @@ const {
 } = require(`../helpers/hooks`);
 const { logContentfulWarning } = require(`../helpers/utils`);
 
-const homepageId = `VoE6QU1LhN2Y5h6Tja3fq`;
+// comment out one line to determine which homepage you want to render
+// don't forget to uncomment correct homepage before merging PR
+// const homepageId = `VoE6QU1LhN2Y5h6Tja3fq`; // this is the PRODUCTION homepage
+const homepageId = `2hHrtVu5fUseOPMTxz82fV`; // this is the DUMMY homepage
 
 const query = (graphql) => {
   return graphql(`

src/build-utils/pages/modularPage.js

@@ -48,6 +48,12 @@ const query = (graphql) => {
               ... on ContentfulHelpSearchModule {
                 ${contentModel.helpSearchModule}
               }
+              ... on ContentfulStepsModule {
+                ${contentModel.stepsModule}
+              }
+              ... on ContentfulFaqCategoriesModule {
+                ${contentModel.faqCategoriesModule}
+              }
             }
           }
           includeContactForm

src/components/Button/Button.css

@@ -90,6 +90,16 @@
     }
   }
 
+  &--tertiary {
+    background: #eaf1ff;
+
+    &:hover {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
   .Icon {
     --icon-size: 20px;
 

src/components/ContentfulModule/ContentfulModule.jsx

@@ -12,6 +12,7 @@ import { HelpSearch } from "../HelpSearch";
 import { PartnersModule } from "./PartnersModule";
 import { FaqCategoriesModule } from "./FaqCategoriesModule";
 import { PromotionBannerModule } from "./PromotionBannerModule";
+import { StepsModule } from "./StepsModule";
 
 const ContentfulModule = ({ module, pathname }) => {
   const type = module?.internal?.type || ``;
@@ -60,6 +61,10 @@ const ContentfulModule = ({ module, pathname }) => {
     return <PromotionBannerModule {...module} />;
   }
 
+  if (type === `ContentfulStepsModule`) {
+    return <StepsModule {...module} />;
+  }
+
   return null;
 };
 

src/components/ContentfulModule/ContentfulModulePropTypes.js

@@ -12,6 +12,7 @@ import { HelpSearchPropTypes } from "../HelpSearch";
 import { PartnersModulePropTypes } from "./PartnersModule";
 import { FaqCategoriesModulePropTypes } from "./FaqCategoriesModule";
 import { PromotionBannerModulePropTypes } from "./PromotionBannerModule";
+import { StepsModulePropTypes } from "./StepsModule";
 
 const ContentfulModulePropTypes = PropTypes.oneOfType([
   PropTypes.shape(EventsModulePropTypes),
@@ -24,6 +25,7 @@ const ContentfulModulePropTypes = PropTypes.oneOfType([
   PropTypes.shape(PartnersModulePropTypes),
   PropTypes.shape(FaqCategoriesModulePropTypes),
   PropTypes.shape(PromotionBannerModulePropTypes),
+  PropTypes.shape(StepsModulePropTypes),
 ]);
 
 export default ContentfulModulePropTypes;

src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx

@@ -1,58 +1,29 @@
 import React from "react";
 
-import { LinkCollectionModulePropTypes } from "./LinkCollectionModulePropTypes";
-import Button from "../../Button";
-import Constraint from "../../Constraint";
-import LinkCollectionWithImage from "../../LinkCollectionWithImage";
-import Section from "../../Section";
-
-import "./LinkCollectionModule.css";
-
-const LinkCollectionModule = ({ links, heading, image }) => {
-  if (image) {
-    return (
-      <Section className="BeVigilantSection">
-        <Constraint>
-          <LinkCollectionWithImage image={image} title={heading}>
-            {links.map(({ id, url, label }) => {
-              if (!label || !url) {
-                return null;
-              }
-              return (
-                <li key={id}>
-                  <Button endIcon={`arrow-blue`} to={url} color={`transparent`}>
-                    {label}
-                  </Button>
-                </li>
-              );
-            })}
-          </LinkCollectionWithImage>
-        </Constraint>
-      </Section>
-    );
+import {
+  LinkCollectionModuleDefaultProps,
+  LinkCollectionModulePropTypes,
+} from "./LinkCollectionModulePropTypes";
+import LcmWithImage from "./variants/LcmWithImage";
+import LcmDefault from "./variants/LcmDefault";
+import LcmLightBlocks from "./variants/LcmLightBlocks";
+
+const LinkCollectionModule = (props) => {
+  const { variant } = props;
+
+  if (variant === `with-image`) {
+    return <LcmWithImage {...props} />;
+  }
+
+  if (variant === `light-blocks`) {
+    return <LcmLightBlocks {...props} />;
   }
-  return (
-    <section className="LinkCollectionModule">
-      {!!heading && <h2 className="LinkCollectionModule__title">{heading}</h2>}
-      <ul className="LinkCollectionModule__button-list">
-        {links.map((link) => {
-          return (
-            <li key={link.id}>
-              <Button endIcon={`arrow-white`} to={link.url} color={`primary`}>
-                {link.label}
-              </Button>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
+
+  return <LcmDefault {...props} />;
 };
 
 LinkCollectionModule.propTypes = LinkCollectionModulePropTypes;
 
-LinkCollectionModule.defaultProps = {
-  title: ``,
-};
+LinkCollectionModule.defaultProps = LinkCollectionModuleDefaultProps;
 
 export default LinkCollectionModule;

src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js

@@ -1,7 +1,9 @@
 import PropTypes from "prop-types";
 
 const LinkCollectionModulePropTypes = {
-  title: PropTypes.string,
+  heading: PropTypes.string,
+  subheading: PropTypes.string,
+  variant: PropTypes.oneOf([`default`, `light-blocks`, `with-image`]),
   links: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -11,4 +13,10 @@ const LinkCollectionModulePropTypes = {
   ).isRequired,
 };
 
-export { LinkCollectionModulePropTypes };
+const LinkCollectionModuleDefaultProps = {
+  heading: ``,
+  subheading: ``,
+  variant: `default`,
+};
+
+export { LinkCollectionModulePropTypes, LinkCollectionModuleDefaultProps };

src/components/ContentfulModule/LinkCollectionModule/index.js

@@ -1,4 +1,11 @@
 import LinkCollectionModule from "./LinkCollectionModule";
-import { LinkCollectionModulePropTypes } from "./LinkCollectionModulePropTypes";
+import {
+  LinkCollectionModulePropTypes,
+  LinkCollectionModuleDefaultProps,
+} from "./LinkCollectionModulePropTypes";
 
-export { LinkCollectionModule, LinkCollectionModulePropTypes };
+export {
+  LinkCollectionModule,
+  LinkCollectionModulePropTypes,
+  LinkCollectionModuleDefaultProps,
+};

src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.css → src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.css

@@ -1,4 +1,4 @@
-.LinkCollectionModule {
+.LcmDefault {
   margin: var(--s__main-padding) 0;
   overflow: hidden;
   width: 100%;

src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import Button from "../../../Button";
+import {
+  LinkCollectionModuleDefaultProps,
+  LinkCollectionModulePropTypes,
+} from "../LinkCollectionModulePropTypes";
+
+import "./LcmDefault.css";
+
+const LcmDefault = ({ heading, links }) => {
+  return (
+    <section className="LcmDefault">
+      {!!heading && <h2 className="LcmDefault__title">{heading}</h2>}
+      <ul className="LcmDefault__button-list">
+        {links.map((link) => {
+          return (
+            <li key={link.id}>
+              <Button endIcon={`arrow-white`} to={link.url} color={`primary`}>
+                {link.label}
+              </Button>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+
+LcmDefault.propTypes = LinkCollectionModulePropTypes;
+
+LcmDefault.defaultProps = LinkCollectionModuleDefaultProps;
+
+export default LcmDefault;

src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css

@@ -0,0 +1,62 @@
+.LcmLightBlocks {
+  margin: var(--s__main-padding) 0;
+  overflow: hidden;
+  width: 100%;
+
+  &__heading {
+    font-size: 1.8rem;
+    margin: 0;
+  }
+
+  &__button-list {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--fs__h5);
+    gap: calc(var(--s__unit) * 6);
+    list-style: none;
+    padding: 0;
+
+    li {
+      width: 100%;
+    }
+
+    .Button {
+      border-radius: var(--s__alt-border-radius);
+      box-sizing: border-box;
+      height: 100%;
+      justify-content: center;
+      padding: calc(var(--s__unit) * 6);
+      text-align: center;
+      text-transform: none;
+      width: 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  @media (min-width: 60rem) {
+    &__heading {
+      font-size: var(--fs__h3);
+    }
+
+    &__button-list {
+      flex-direction: row;
+      font-size: 1.5rem;
+      justify-content: space-between;
+
+      > * {
+        flex: 1;
+      }
+    }
+
+    .Button {
+      box-shadow: none;
+
+      .Icon {
+        display: none;
+      }
+    }
+  }
+}

src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import Button from "../../../Button";
+import Constraint from "../../../Constraint";
+import Section from "../../../Section";
+import {
+  LinkCollectionModuleDefaultProps,
+  LinkCollectionModulePropTypes,
+} from "../LinkCollectionModulePropTypes";
+
+import "./LcmLightBlocks.css";
+
+const LcmLightBlocks = ({ heading, subheading, links }) => {
+  console.log({ links });
+  return (
+    <Section className="LcmLightBlocks">
+      <Constraint>
+        {!!heading && <h2 className="LcmLightBlocks__heading">{heading}</h2>}
+        {!!subheading && (
+          <p className="LcmLightBlocks__subheading">{subheading}</p>
+        )}
+        <ul className="LcmLightBlocks__button-list">
+          {links.map((link) => {
+            return (
+              <li key={link.id}>
+                <Button to={link.url} color={`tertiary`}>
+                  {link.label}
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      </Constraint>
+    </Section>
+  );
+};
+
+LcmLightBlocks.propTypes = LinkCollectionModulePropTypes;
+
+LcmLightBlocks.defaultProps = LinkCollectionModuleDefaultProps;
+
+export default LcmLightBlocks;