From e875fd2b3a601e4ed65a7e3b282ac1a57506c06e Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 13:29:37 +0200
Subject: [PATCH 01/15] #320 Implement personalized guides

---
 .../helpers/contentfulContentModel.js         |  19 ++-
 src/build-utils/pages/homePage.js             |   5 +-
 src/build-utils/pages/modularPage.js          |   6 +
 src/components/Button/Button.css              |  10 ++
 .../ContentfulModule/ContentfulModule.jsx     |   5 +
 .../ContentfulModulePropTypes.js              |   2 +
 .../LinkCollectionModule.jsx                  |  69 +++--------
 .../LinkCollectionModulePropTypes.js          |  12 +-
 .../LinkCollectionModule/index.js             |  11 +-
 .../LcmDefault.css}                           |   2 +-
 .../variants/LcmDefault.jsx                   |  34 +++++
 .../variants/LcmLightBlocks.css               |  62 ++++++++++
 .../variants/LcmLightBlocks.jsx               |  42 +++++++
 .../variants/LcmWithImage.css                 | 116 ++++++++++++++++++
 .../variants/LcmWithImage.jsx                 |  56 +++++++++
 .../ResourceListModule/ResourceListModule.jsx |   4 +-
 .../ResourceListModulePropTypes.js            |   4 +-
 .../StepsModule/StepsModule.css               |  51 ++++++++
 .../StepsModule/StepsModule.jsx               |  61 +++++++++
 .../StepsModule/StepsModulePropTypes.js       |  14 +++
 .../ContentfulModule/StepsModule/index.js     |   7 ++
 src/components/Faq/Faq.js                     |  24 +---
 src/components/Faq/index.js                   |   2 +
 .../LinkCollectionWithImage.js                |  32 -----
 .../LinkCollectionWithImage/index.js          |   1 -
 src/components/Section/Section.css            |   4 -
 src/constants/AdditionalNavigation.js         |  11 ++
 src/helpers/handlers.js                       |  29 ++++-
 src/templates/modularPage.jsx                 |   1 +
 29 files changed, 578 insertions(+), 118 deletions(-)
 rename src/components/ContentfulModule/LinkCollectionModule/{LinkCollectionModule.css => variants/LcmDefault.css} (98%)
 create mode 100644 src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx
 create mode 100644 src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css
 create mode 100644 src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
 create mode 100644 src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.css
 create mode 100644 src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.jsx
 create mode 100644 src/components/ContentfulModule/StepsModule/StepsModule.css
 create mode 100644 src/components/ContentfulModule/StepsModule/StepsModule.jsx
 create mode 100644 src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js
 create mode 100644 src/components/ContentfulModule/StepsModule/index.js
 delete mode 100644 src/components/LinkCollectionWithImage/LinkCollectionWithImage.js
 delete mode 100644 src/components/LinkCollectionWithImage/index.js

diff --git a/src/build-utils/helpers/contentfulContentModel.js b/src/build-utils/helpers/contentfulContentModel.js
index 482b69e6..2df65972 100644
--- a/src/build-utils/helpers/contentfulContentModel.js
+++ b/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,
 };
diff --git a/src/build-utils/pages/homePage.js b/src/build-utils/pages/homePage.js
index 6a1f0d92..1c2598ed 100644
--- a/src/build-utils/pages/homePage.js
+++ b/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(`
diff --git a/src/build-utils/pages/modularPage.js b/src/build-utils/pages/modularPage.js
index 7befa9c6..c6c31b9b 100644
--- a/src/build-utils/pages/modularPage.js
+++ b/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
diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index aea5302c..e9b3582e 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -90,6 +90,16 @@
     }
   }
 
+  &--tertiary {
+    background: #eaf1ff;
+
+    &:hover {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
   .Icon {
     --icon-size: 20px;
 
diff --git a/src/components/ContentfulModule/ContentfulModule.jsx b/src/components/ContentfulModule/ContentfulModule.jsx
index 74f9af9c..94829140 100644
--- a/src/components/ContentfulModule/ContentfulModule.jsx
+++ b/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;
 };
 
diff --git a/src/components/ContentfulModule/ContentfulModulePropTypes.js b/src/components/ContentfulModule/ContentfulModulePropTypes.js
index d556c091..ad34fd3a 100644
--- a/src/components/ContentfulModule/ContentfulModulePropTypes.js
+++ b/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;
diff --git a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx b/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx
index 50d9ed45..82a42af0 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx
+++ b/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;
diff --git a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js b/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js
index 5dd5a080..7da37cd4 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js
+++ b/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 };
diff --git a/src/components/ContentfulModule/LinkCollectionModule/index.js b/src/components/ContentfulModule/LinkCollectionModule/index.js
index 675c65f8..b60271ee 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/index.js
+++ b/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,
+};
diff --git a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.css b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.css
similarity index 98%
rename from src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.css
rename to src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.css
index d0eb5bdb..b8a31fae 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.css
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.css
@@ -1,4 +1,4 @@
-.LinkCollectionModule {
+.LcmDefault {
   margin: var(--s__main-padding) 0;
   overflow: hidden;
   width: 100%;
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx
new file mode 100644
index 00000000..7eca8e47
--- /dev/null
+++ b/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;
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css
new file mode 100644
index 00000000..a7759a34
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
new file mode 100644
index 00000000..f9155ac3
--- /dev/null
+++ b/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;
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.css b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.css
new file mode 100644
index 00000000..1fea6d81
--- /dev/null
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.css
@@ -0,0 +1,116 @@
+.LcmWithImage {
+  background-color: #f6f6f6;
+
+  &__text {
+    margin-bottom: calc(var(--s__unit) * 10);
+    padding-top: calc(var(--s__unit) * 10);
+  }
+
+  &__title {
+    font-size: var(--fs__h4);
+    margin: 0;
+    margin-bottom: calc(var(--s__unit) * 10);
+  }
+
+  &__button-list {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.25rem;
+    list-style: none;
+    padding: 0;
+
+    li {
+      padding: var(--s__main-padding) 0;
+
+      &:first-of-type {
+        padding-top: 0;
+      }
+
+      + li {
+        border-top: 1px solid #ececec;
+      }
+    }
+  }
+
+  &__image {
+    .gatsby-image-wrapper {
+      height: 100%;
+
+      /* Fuck this hack, but ok. */
+      margin: 0 -16px;
+      width: 100%;
+      width: calc(100% + 32px);
+    }
+  }
+
+  .Button {
+    border: none;
+    color: var(--c__main-color);
+    justify-content: space-between;
+    padding: 0;
+    text-transform: none;
+
+    .Icon {
+      --icon-size: 32px;
+
+      margin-left: var(--s__main-padding);
+      min-width: var(--icon-size);
+    }
+
+    &:hover {
+      text-decoration: underline;
+
+      &::after {
+        transform: none;
+      }
+    }
+  }
+
+  @media (min-width: 40rem) {
+    &__section {
+      display: flex;
+
+      > * {
+        flex: 1;
+      }
+    }
+
+    &__text {
+      margin-bottom: 0;
+      padding-right: var(--s__main-padding);
+      padding-top: calc(var(--s__alt-padding) * 2);
+    }
+
+    &__title {
+      font-size: var(--fs__h3);
+      margin-bottom: calc(var(--s__alt-padding) * 2);
+    }
+
+    &__button-list {
+      font-size: 1.5rem;
+
+      li {
+        padding: var(--s__alt-padding) 0;
+
+        &:first-of-type {
+          padding-top: 0;
+        }
+
+        + li {
+          border: none;
+        }
+      }
+    }
+
+    &__image {
+      .gatsby-image-wrapper {
+        margin: unset;
+        width: 100%;
+      }
+    }
+
+    .Button {
+      display: inline-flex;
+    }
+  }
+}
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.jsx b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.jsx
new file mode 100644
index 00000000..10d73140
--- /dev/null
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmWithImage.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+import Section from "../../../Section";
+import Constraint from "../../../Constraint";
+import Button from "../../../Button";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import {
+  LinkCollectionModuleDefaultProps,
+  LinkCollectionModulePropTypes,
+} from "../LinkCollectionModulePropTypes";
+
+import "./LcmWithImage.css";
+
+const LcmWithImage = ({ heading, links, image }) => {
+  return (
+    <Section className="LcmWithImage">
+      <Constraint>
+        <section className="LcmWithImage__section">
+          <div className="LcmWithImage__text">
+            {!!heading && <h2 className="LcmWithImage__title">{heading}</h2>}
+            <ul className="LcmWithImage__button-list">
+              {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>
+                );
+              })}
+            </ul>
+          </div>
+
+          {image && (
+            <div className="LcmWithImage__image">
+              <GatsbyImage image={getImage(image)} alt="" />
+            </div>
+          )}
+        </section>
+      </Constraint>
+    </Section>
+  );
+};
+
+LcmWithImage.propTypes = LinkCollectionModulePropTypes;
+
+LcmWithImage.defaultProps = LinkCollectionModuleDefaultProps;
+
+export default LcmWithImage;
diff --git a/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx b/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx
index 0ea7e14b..9182e94b 100644
--- a/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx
+++ b/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx
@@ -8,11 +8,11 @@ import {
 import { formatRichText } from "../../../helpers/formatting";
 import ResourceItem from "./ResourceItem";
 
-const ResourceListModule = ({ heading, subheading, resources }) => {
+const ResourceListModule = ({ heading, subheadingRich, resources }) => {
   return (
     <section className="ResourceListModule">
       {!!heading && <h2 className="ResourceListModule__title">{heading}</h2>}
-      {subheading?.raw && formatRichText(subheading.raw)}
+      {subheadingRich?.raw && formatRichText(subheadingRich.raw)}
       <ul className="ResourceListModule__list">
         {resources?.at(0) &&
           resources.map((item) => {
diff --git a/src/components/ContentfulModule/ResourceListModule/ResourceListModulePropTypes.js b/src/components/ContentfulModule/ResourceListModule/ResourceListModulePropTypes.js
index 1d5eb814..dae0803b 100644
--- a/src/components/ContentfulModule/ResourceListModule/ResourceListModulePropTypes.js
+++ b/src/components/ContentfulModule/ResourceListModule/ResourceListModulePropTypes.js
@@ -10,7 +10,7 @@ const ResourceItemPropTypes = {
 const ResourceListModulePropTypes = {
   id: PropTypes.string.isRequired,
   heading: PropTypes.string,
-  subheading: PropTypes.shape({
+  subheadingRich: PropTypes.shape({
     raw: PropTypes.string,
   }),
   resources: PropTypes.arrayOf(PropTypes.shape(ResourceItemPropTypes)),
@@ -18,7 +18,7 @@ const ResourceListModulePropTypes = {
 
 const ResourceListModuleDefaultProps = {
   heading: ``,
-  subheading: {
+  subheadingRich: {
     raw: ``,
   },
 };
diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.css b/src/components/ContentfulModule/StepsModule/StepsModule.css
new file mode 100644
index 00000000..cdb13ae8
--- /dev/null
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.css
@@ -0,0 +1,51 @@
+.StepsModule {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--s__unit) * 6);
+  padding: var(--s__main-padding) 0;
+
+  details {
+    border: 1px solid #ececec;
+    border-radius: var(--s__main-border-radius);
+    padding: var(--s__main-padding);
+
+    &[open] summary::after {
+      transform: rotate(135deg);
+    }
+  }
+
+  summary {
+    align-items: center;
+    border-bottom: 1px solid #ececec;
+    color: var(--c__primary);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+
+    &,
+    h3 {
+      font-size: 1.5rem;
+    }
+
+    h3 {
+      font-weight: var(--fw__small);
+    }
+
+    &::after {
+      border-color: var(--c__primary);
+      border-style: solid;
+      border-width: 0.15em 0.15em 0 0;
+      content: "";
+      display: inline-block;
+      height: 0.45em;
+      left: -0.5em;
+      margin-left: 2rem;
+      position: relative;
+      transform: rotate(45deg) translateY(50%);
+      transform-origin: center;
+      transition: transform 0.2s ease;
+      vertical-align: middle;
+      width: 0.45em;
+    }
+  }
+}
diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.jsx b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
new file mode 100644
index 00000000..04f566f1
--- /dev/null
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { formatRichText } from "../../../helpers/formatting";
+import {
+  StepsModulePropTypes,
+  StepsModuleDefaultProps,
+} from "./StepsModulePropTypes";
+import { getTranslatedText } from "../../../utils/getTranslatedText";
+import { handleAnchorClick } from "../../Faq";
+
+import "./StepsModule.css";
+import { useEffect } from "react";
+import { openDetailsByHash } from "../../../helpers/handlers";
+
+const StepsModule = ({ steps }) => {
+  useEffect(() => {
+    window.addEventListener(`hashchange`, openDetailsByHash);
+    openDetailsByHash();
+
+    return () => {
+      window.removeEventListener(`hashchange`, openDetailsByHash);
+    };
+  }, []);
+
+  return (
+    <div className="StepsModule">
+      {steps.map((step, index) => {
+        const tabId = `tab-${index + 1}`;
+        return (
+          <details key={step.id} id={tabId} open={index === 0}>
+            <summary>
+              <h3>
+                <b>Step {index + 1}.</b> {step.question}
+              </h3>
+            </summary>
+            {formatRichText(step.answer.raw)}
+            <div className="Faq__actions">
+              <div className="Faq__copy-action">
+                <a
+                  href={`#${tabId}`}
+                  data-copied={getTranslatedText(`actions.copyLinkPopupLabel`)}
+                  onClick={(e) => {
+                    handleAnchorClick(e);
+                  }}
+                  className="copy"
+                >
+                  {getTranslatedText(`actions.copyLink`)}
+                </a>
+              </div>
+            </div>
+          </details>
+        );
+      })}
+    </div>
+  );
+};
+
+StepsModule.propTypes = StepsModulePropTypes;
+
+StepsModule.defaultProps = StepsModuleDefaultProps;
+
+export default StepsModule;
diff --git a/src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js b/src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js
new file mode 100644
index 00000000..22d9b6c3
--- /dev/null
+++ b/src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js
@@ -0,0 +1,14 @@
+import PropTypes from "prop-types";
+import { FaqItemPropTypes } from "../../Faq";
+
+const StepsModulePropTypes = {
+  steps: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.shape(FaqItemPropTypes)])
+  ),
+};
+
+const StepsModuleDefaultProps = {
+  steps: [],
+};
+
+export { StepsModuleDefaultProps, StepsModulePropTypes };
diff --git a/src/components/ContentfulModule/StepsModule/index.js b/src/components/ContentfulModule/StepsModule/index.js
new file mode 100644
index 00000000..d22db113
--- /dev/null
+++ b/src/components/ContentfulModule/StepsModule/index.js
@@ -0,0 +1,7 @@
+import StepsModule from "./StepsModule";
+import {
+  StepsModulePropTypes,
+  StepsModuleDefaultProps,
+} from "./StepsModulePropTypes";
+
+export { StepsModule, StepsModuleDefaultProps, StepsModulePropTypes };
diff --git a/src/components/Faq/Faq.js b/src/components/Faq/Faq.js
index 83c85653..97e9f62a 100644
--- a/src/components/Faq/Faq.js
+++ b/src/components/Faq/Faq.js
@@ -14,23 +14,7 @@ import { ResourceListModulePropTypes } from "../ContentfulModule/ResourceListMod
 import { formatRichText } from "../../helpers/formatting";
 
 import "./Faq.css";
-
-// Used stackoverflow as reference
-// Not a 1:1 copy
-// https://stackoverflow.com/a/37033774
-const openTarget = () => {
-  const hash = location.hash.substring(1);
-  if (hash) {
-    const details = Array.from(document.getElementById(hash).children).find(
-      (element) => {
-        return element.tagName === `DETAILS`;
-      }
-    );
-    if (details) {
-      details.open = true;
-    }
-  }
-};
+import { openDetailsByHash } from "../../helpers/handlers";
 
 const Faq = ({
   title,
@@ -42,11 +26,11 @@ const Faq = ({
   crumbs,
 }) => {
   useEffect(() => {
-    window.addEventListener(`hashchange`, openTarget);
-    openTarget();
+    window.addEventListener(`hashchange`, openDetailsByHash);
+    openDetailsByHash();
 
     return () => {
-      window.removeEventListener(`hashchange`, openTarget);
+      window.removeEventListener(`hashchange`, openDetailsByHash);
     };
   }, []);
 
diff --git a/src/components/Faq/index.js b/src/components/Faq/index.js
index a873fe26..d9b935d1 100644
--- a/src/components/Faq/index.js
+++ b/src/components/Faq/index.js
@@ -3,6 +3,7 @@ import { FaqNavDataPropTypes } from "./Faq";
 import { FaqNav } from "./FaqNav";
 import { FaqItemPropTypes } from "./FaqModule/FaqItem";
 import { FaqModulePropTypes } from "./FaqModule/FaqModulePropTypes";
+import { handleAnchorClick } from "./FaqModule/FaqItem/faqItemUtils";
 
 export {
   Faq,
@@ -10,4 +11,5 @@ export {
   FaqNav,
   FaqItemPropTypes,
   FaqModulePropTypes,
+  handleAnchorClick,
 };
diff --git a/src/components/LinkCollectionWithImage/LinkCollectionWithImage.js b/src/components/LinkCollectionWithImage/LinkCollectionWithImage.js
deleted file mode 100644
index 3bd32c7f..00000000
--- a/src/components/LinkCollectionWithImage/LinkCollectionWithImage.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from "react";
-import PropTypes from "prop-types";
-import { GatsbyImage, getImage } from "gatsby-plugin-image";
-
-// Style.
-import "./LinkCollectionWithImage.css";
-import { gatsbyImagePropType } from "../../helpers/genericPropTypes";
-
-const LinkCollectionWithImage = ({ title, children, image }) => {
-  return (
-    <section className="LinkCollectionWithImage">
-      <div className="LinkCollectionWithImage__text">
-        {!!title && <h2 className="LinkCollectionWithImage__title">{title}</h2>}
-        <ul className="LinkCollectionWithImage__button-list">{children}</ul>
-      </div>
-
-      {image && (
-        <div className="LinkCollectionWithImage__image">
-          <GatsbyImage image={getImage(image)} alt="" />
-        </div>
-      )}
-    </section>
-  );
-};
-
-LinkCollectionWithImage.propTypes = {
-  title: PropTypes.string,
-  children: PropTypes.node,
-  image: gatsbyImagePropType,
-};
-
-export default LinkCollectionWithImage;
diff --git a/src/components/LinkCollectionWithImage/index.js b/src/components/LinkCollectionWithImage/index.js
deleted file mode 100644
index 5c2b5544..00000000
--- a/src/components/LinkCollectionWithImage/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./LinkCollectionWithImage";
diff --git a/src/components/Section/Section.css b/src/components/Section/Section.css
index 39601c13..1ebd95b6 100644
--- a/src/components/Section/Section.css
+++ b/src/components/Section/Section.css
@@ -28,10 +28,6 @@
   &.ProtestFormsSection {
     margin-bottom: calc(var(--s__unit) * 10);
   }
-
-  &.BeVigilantSection {
-    background-color: #f6f6f6;
-  }
 }
 
 .HeroSection {
diff --git a/src/constants/AdditionalNavigation.js b/src/constants/AdditionalNavigation.js
index d0abb509..0fe0acc1 100644
--- a/src/constants/AdditionalNavigation.js
+++ b/src/constants/AdditionalNavigation.js
@@ -35,4 +35,15 @@ export const ADDITIONAL_NAVIGATION = {
       title: `Donation`,
     },
   ],
+  // @todo: fix these links once we have all the slugs for personalized guide pages
+  "/ua/guide-for-new-arrivals": [
+    {
+      pathname: `/ua`,
+      title: `Temp link`,
+    },
+    {
+      pathname: `/ua`,
+      title: `temp link 2`,
+    },
+  ],
 };
diff --git a/src/helpers/handlers.js b/src/helpers/handlers.js
index a1348954..9ba52cbc 100644
--- a/src/helpers/handlers.js
+++ b/src/helpers/handlers.js
@@ -26,4 +26,31 @@ const getRichTextModuleData = (node, refs) => {
   return moduleData || null;
 };
 
-export { isUkrainianPage, getLocaleFromPath, getRichTextModuleData };
+// Used stackoverflow as reference
+// Not a 1:1 copy
+// https://stackoverflow.com/a/37033774
+const openDetailsByHash = () => {
+  const hash = location.hash.substring(1);
+  if (hash) {
+    const hashElement = document.getElementById(hash);
+    if (hashElement.tagName === `DETAILS`) {
+      hashElement.open = true;
+      return;
+    }
+
+    const details = Array.from(hashElement.children).find(
+      ({ tagName }) => tagName === `DETAILS`
+    );
+
+    if (details) {
+      details.open = true;
+    }
+  }
+};
+
+export {
+  isUkrainianPage,
+  getLocaleFromPath,
+  getRichTextModuleData,
+  openDetailsByHash,
+};
diff --git a/src/templates/modularPage.jsx b/src/templates/modularPage.jsx
index e0669116..cb6e6e35 100644
--- a/src/templates/modularPage.jsx
+++ b/src/templates/modularPage.jsx
@@ -96,6 +96,7 @@ const ModularPage = ({ path, pageContext }) => {
               <ContentfulModule
                 key={module.id}
                 module={supplementModule(module)}
+                pathname={path}
               />
             );
           })}

From a2cdfb7a52d56322c811c55972fd57e6bd14defc Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 14:13:27 +0200
Subject: [PATCH 02/15] #320 fix additional nav

---
 src/constants/AdditionalNavigation.js | 95 +++++++++++++++++++++++++--
 1 file changed, 91 insertions(+), 4 deletions(-)

diff --git a/src/constants/AdditionalNavigation.js b/src/constants/AdditionalNavigation.js
index 0fe0acc1..0e45faad 100644
--- a/src/constants/AdditionalNavigation.js
+++ b/src/constants/AdditionalNavigation.js
@@ -35,15 +35,102 @@ export const ADDITIONAL_NAVIGATION = {
       title: `Donation`,
     },
   ],
+
   // @todo: fix these links once we have all the slugs for personalized guide pages
+  /* Personalized guides */
+  /* Guide for new arrivals */
+  "/guide-for-new-arrivals": [
+    {
+      pathname: `/guide-for-persons-with-children`,
+      title: `Guide for persons with children`,
+    },
+    {
+      pathname: `/guide-for-persons-with-disabilities`,
+      title: `Guide for persons with disabilities`,
+    },
+  ],
+  "/en/guide-for-new-arrivals": [
+    {
+      pathname: `/en/guide-for-persons-with-children`,
+      title: `Guide for persons with children`,
+    },
+    {
+      pathname: `/en/guide-for-persons-with-disabilities`,
+      title: `Guide for persons with disabilities`,
+    },
+  ],
   "/ua/guide-for-new-arrivals": [
     {
-      pathname: `/ua`,
-      title: `Temp link`,
+      pathname: `/ua/guide-for-persons-with-children`,
+      title: `Guide for persons with children`,
+    },
+    {
+      pathname: `/ua/guide-for-persons-with-disabilities`,
+      title: `Guide for persons with disabilities`,
+    },
+  ],
+
+  /* Guide for persons with children */
+  "/guide-for-persons-with-children": [
+    {
+      pathname: `/guide-for-persons-with-disabilities`,
+      title: `Guide for persons with disabilities`,
+    },
+    {
+      pathname: `/guide-for-new-arrivals`,
+      title: `Guide for new arrivals`,
+    },
+  ],
+  "/en/guide-for-persons-with-children": [
+    {
+      pathname: `/en/guide-for-persons-with-disabilities`,
+      title: `Guide for persons with disabilities`,
+    },
+    {
+      pathname: `/en/guide-for-new-arrivals`,
+      title: `Guide for new arrivals`,
+    },
+  ],
+  "/ua/guide-for-persons-with-children": [
+    {
+      pathname: `/ua/guide-for-persons-with-disabilities`,
+      title: `Guide for persons with disabilities`,
+    },
+    {
+      pathname: `/ua/guide-for-new-arrivals`,
+      title: `Guide for new arrivals`,
+    },
+  ],
+
+  /* Guide for persons with disabilities */
+  "/guide-for-persons-with-disabilities": [
+    {
+      pathname: `/guide-for-new-arrivals`,
+      title: `Guide for new arrivals`,
+    },
+    {
+      pathname: `/guide-for-persons-with-children`,
+      title: `Guide for persons with children`,
+    },
+  ],
+  "/en/guide-for-persons-with-disabilities": [
+    {
+      pathname: `/en/guide-for-new-arrivals`,
+      title: `Guide for new arrivals`,
+    },
+    {
+      pathname: `/en/guide-for-persons-with-children`,
+      title: `Guide for persons with children`,
+    },
+  ],
+  "/ua/guide-for-persons-with-disabilities": [
+    {
+      pathname: `/ua/guide-for-new-arrivals`,
+      title: `Guide for new arrivals`,
     },
     {
-      pathname: `/ua`,
-      title: `temp link 2`,
+      pathname: `/ua/guide-for-persons-with-children`,
+      title: `Guide for persons with children`,
     },
   ],
 };

From b5a82cd5ab52d3b636fecfc21799431356b5b4c1 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 14:13:40 +0200
Subject: [PATCH 03/15] #320 add link to steps faq item

---
 .../helpers/contentfulContentModel.js         |  5 ++
 .../StepsModule/StepsModule.css               | 82 ++++++++++++++++++-
 .../StepsModule/StepsModule.jsx               | 36 +++++---
 .../Faq/FaqModule/FaqItem/FaqItemPropTypes.js |  2 +
 src/helpers/genericPropTypes.js               | 17 ++--
 5 files changed, 120 insertions(+), 22 deletions(-)

diff --git a/src/build-utils/helpers/contentfulContentModel.js b/src/build-utils/helpers/contentfulContentModel.js
index 2df65972..b94038f0 100644
--- a/src/build-utils/helpers/contentfulContentModel.js
+++ b/src/build-utils/helpers/contentfulContentModel.js
@@ -165,6 +165,11 @@ const faqItem = `
       }
     }
   }
+  additionalLink {
+    ... on ContentfulLink {
+      ${link}
+    }
+  }
 `;
 
 const partnersModule = `
diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.css b/src/components/ContentfulModule/StepsModule/StepsModule.css
index cdb13ae8..f660fecb 100644
--- a/src/components/ContentfulModule/StepsModule/StepsModule.css
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.css
@@ -16,7 +16,6 @@
 
   summary {
     align-items: center;
-    border-bottom: 1px solid #ececec;
     color: var(--c__primary);
     cursor: pointer;
     display: flex;
@@ -29,6 +28,7 @@
 
     h3 {
       font-weight: var(--fw__small);
+      margin: 0;
     }
 
     &::after {
@@ -48,4 +48,84 @@
       width: 0.45em;
     }
   }
+
+  &__content {
+    border-top: 1px solid #ececec;
+    margin-top: var(--s__main-padding);
+  }
+
+  &__actions {
+    align-items: center;
+    color: var(--c__primary);
+    display: flex;
+    justify-content: space-between;
+    margin: calc(var(--s__unit) * 4) 0;
+    position: relative;
+
+    .copy {
+      font-size: 0.9rem;
+
+      &::after {
+        background-color: var(--c__primary);
+        content: "";
+        display: inline-block;
+        height: 20px;
+        margin-left: 10px;
+        mask-image: url("../../../images/icons/copy.svg");
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        position: relative;
+        vertical-align: middle;
+        width: 20px;
+      }
+
+      &:hover {
+        color: var(--c__primary);
+        cursor: pointer;
+
+        &::after {
+          background-color: var(--c__primary);
+          content: "";
+          display: inline-block;
+          height: 20px;
+          margin-left: 10px;
+          mask-image: url("../../../images/icons/copy.svg");
+          mask-position: center;
+          mask-repeat: no-repeat;
+          mask-size: contain;
+          position: relative;
+          vertical-align: middle;
+          width: 20px;
+        }
+
+        &:hover {
+          color: var(--c__primary);
+          cursor: pointer;
+
+          &::before {
+            background-color: var(--c__primary);
+          }
+        }
+      }
+    }
+
+    .copy-popup {
+      opacity: 0;
+      position: absolute;
+      right: 30px; /* icon width + margin */
+      text-transform: uppercase;
+      top: 0;
+      transition: transform 0.2s ease-in, opacity 0.5s;
+
+      &--active {
+        opacity: 1;
+        transform: translateY(-2em);
+      }
+    }
+  }
+
+  &__copy-action {
+    margin-left: auto;
+  }
 }
diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.jsx b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
index 04f566f1..973ca8f9 100644
--- a/src/components/ContentfulModule/StepsModule/StepsModule.jsx
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
@@ -10,6 +10,7 @@ import { handleAnchorClick } from "../../Faq";
 import "./StepsModule.css";
 import { useEffect } from "react";
 import { openDetailsByHash } from "../../../helpers/handlers";
+import Button from "../../Button";
 
 const StepsModule = ({ steps }) => {
   useEffect(() => {
@@ -32,19 +33,28 @@ const StepsModule = ({ steps }) => {
                 <b>Step {index + 1}.</b> {step.question}
               </h3>
             </summary>
-            {formatRichText(step.answer.raw)}
-            <div className="Faq__actions">
-              <div className="Faq__copy-action">
-                <a
-                  href={`#${tabId}`}
-                  data-copied={getTranslatedText(`actions.copyLinkPopupLabel`)}
-                  onClick={(e) => {
-                    handleAnchorClick(e);
-                  }}
-                  className="copy"
-                >
-                  {getTranslatedText(`actions.copyLink`)}
-                </a>
+            <div className="StepsModule__content">
+              {formatRichText(step.answer.raw)}
+              <div className="StepsModule__actions">
+                {step?.additionalLink && (
+                  <Button color="primary-outline" to={step.additionalLink.url}>
+                    {step.additionalLink.label}
+                  </Button>
+                )}
+                <div className="StepsModule__copy-action">
+                  <a
+                    href={`#${tabId}`}
+                    data-copied={getTranslatedText(
+                      `actions.copyLinkPopupLabel`
+                    )}
+                    onClick={(e) => {
+                      handleAnchorClick(e);
+                    }}
+                    className="copy"
+                  >
+                    {getTranslatedText(`actions.copyLink`)}
+                  </a>
+                </div>
               </div>
             </div>
           </details>
diff --git a/src/components/Faq/FaqModule/FaqItem/FaqItemPropTypes.js b/src/components/Faq/FaqModule/FaqItem/FaqItemPropTypes.js
index da2faece..9547ff51 100644
--- a/src/components/Faq/FaqModule/FaqItem/FaqItemPropTypes.js
+++ b/src/components/Faq/FaqModule/FaqItem/FaqItemPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { linkPropTypes } from "../../../../helpers/genericPropTypes";
 
 const FaqItemPropTypes = {
   id: PropTypes.string.isRequired,
@@ -7,6 +8,7 @@ const FaqItemPropTypes = {
     raw: PropTypes.string,
   }).isRequired,
   index: PropTypes.number.isRequired,
+  additionalLink: linkPropTypes,
 };
 
 export { FaqItemPropTypes };
diff --git a/src/helpers/genericPropTypes.js b/src/helpers/genericPropTypes.js
index 4df031ac..93b64696 100644
--- a/src/helpers/genericPropTypes.js
+++ b/src/helpers/genericPropTypes.js
@@ -40,18 +40,18 @@ const navigationPropTypes = PropTypes.shape({
   node_locale: localePropType.isRequired,
 });
 
+const linkPropTypes = PropTypes.shape({
+  id: PropTypes.string,
+  label: PropTypes.string,
+  url: PropTypes.string,
+  sublabel: PropTypes.string,
+});
+
 const promoLinePropTypes = PropTypes.shape({
   heading: PropTypes.string.isRequired,
   headingLink: PropTypes.string,
   subheading: PropTypes.string,
-  linkButton: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string,
-      url: PropTypes.string,
-      sublabel: PropTypes.string,
-    })
-  ),
+  linkButton: PropTypes.arrayOf(linkPropTypes),
 });
 
 const nodeSlugsPropTypes = PropTypes.shape({
@@ -70,6 +70,7 @@ export {
   localePropType,
   gatsbyImagePropType,
   navigationPropTypes,
+  linkPropTypes,
   promoLinePropTypes,
   nodeSlugsPropTypes,
   nodeSlugsDefaultProps,

From 46ee384561c6ab10986efce6357a97a6ce15addb Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 14:20:09 +0200
Subject: [PATCH 04/15] #320 remove console log

---
 .../LinkCollectionModule/variants/LcmLightBlocks.jsx             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
index f9155ac3..22d8d290 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
@@ -11,7 +11,6 @@ import {
 import "./LcmLightBlocks.css";
 
 const LcmLightBlocks = ({ heading, subheading, links }) => {
-  console.log({ links });
   return (
     <Section className="LcmLightBlocks">
       <Constraint>

From 98754297085d554bb9c24d02f1d3a250f3295a7f Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 14:24:23 +0200
Subject: [PATCH 05/15] #320 translate "step" string

---
 src/components/ContentfulModule/StepsModule/StepsModule.jsx | 6 +++++-
 src/locales/en/index.json                                   | 3 ++-
 src/locales/lt/index.json                                   | 3 ++-
 src/locales/ua/index.json                                   | 3 ++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.jsx b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
index 973ca8f9..0299ed2a 100644
--- a/src/components/ContentfulModule/StepsModule/StepsModule.jsx
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
@@ -30,7 +30,11 @@ const StepsModule = ({ steps }) => {
           <details key={step.id} id={tabId} open={index === 0}>
             <summary>
               <h3>
-                <b>Step {index + 1}.</b> {step.question}
+                <b>
+                  {getTranslatedText(`labels.step`)} {index + 1}.
+                </b>
+                {` `}
+                {step.question}
               </h3>
             </summary>
             <div className="StepsModule__content">
diff --git a/src/locales/en/index.json b/src/locales/en/index.json
index 7d7d597a..8a9f5b90 100644
--- a/src/locales/en/index.json
+++ b/src/locales/en/index.json
@@ -22,7 +22,8 @@
     "email": "E-mail",
     "message": "Message",
     "source": "Source",
-    "links": "Links"
+    "links": "Links",
+    "step": "Step"
   },
   "organisation": {
     "about": "About",
diff --git a/src/locales/lt/index.json b/src/locales/lt/index.json
index 75f90592..e892ac64 100644
--- a/src/locales/lt/index.json
+++ b/src/locales/lt/index.json
@@ -22,7 +22,8 @@
     "email": "El. paštas",
     "message": "Žinutė",
     "source": "Šaltinis",
-    "links": "Nuorodos"
+    "links": "Nuorodos",
+    "step": "Žingsnis"
   },
   "organisation": {
     "about": "Apie",
diff --git a/src/locales/ua/index.json b/src/locales/ua/index.json
index 36fd2632..9138487c 100644
--- a/src/locales/ua/index.json
+++ b/src/locales/ua/index.json
@@ -22,7 +22,8 @@
     "email": "Е. пошта",
     "message": "Повідомлення",
     "source": "Джерело",
-    "links": "Посилання"
+    "links": "Посилання",
+    "step": "<translate me>"
   },
   "organisation": {
     "about": "Про",

From d4864b4364b516d9073938b7d652726ce87cd725 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 14:40:42 +0200
Subject: [PATCH 06/15] #320 fix additional nav trailing slash

---
 .../AdditionalNavigation.js                   |  6 ++-
 src/constants/AdditionalNavigation.js         | 48 +++++++++----------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/AdditionalNavigation/AdditionalNavigation.js b/src/components/AdditionalNavigation/AdditionalNavigation.js
index 11a6f8cb..bb286906 100644
--- a/src/components/AdditionalNavigation/AdditionalNavigation.js
+++ b/src/components/AdditionalNavigation/AdditionalNavigation.js
@@ -9,7 +9,11 @@ import "./AdditionalNavigation.css";
 
 const AdditionalNavigation = () => {
   const { pathname } = useLocation();
-  const additionalNavigationArray = ADDITIONAL_NAVIGATION[pathname];
+  const pathnameWithoutTrailingSlash = pathname.endsWith(`/`)
+    ? pathname.slice(0, -1)
+    : pathname;
+  const additionalNavigationArray =
+    ADDITIONAL_NAVIGATION[pathnameWithoutTrailingSlash];
 
   return (
     <>
diff --git a/src/constants/AdditionalNavigation.js b/src/constants/AdditionalNavigation.js
index 0e45faad..5e6708cd 100644
--- a/src/constants/AdditionalNavigation.js
+++ b/src/constants/AdditionalNavigation.js
@@ -1,37 +1,37 @@
 export const ADDITIONAL_NAVIGATION = {
   "/pagalba-ukrainai/savanoryste": [
     {
-      pathname: `/pagalba-ukrainai/aukojimas`,
+      pathname: `/pagalba-ukrainai/aukojimas/`,
       title: `Aukojimas`,
     },
   ],
   "/pagalba-ukrainai/aukojimas": [
     {
-      pathname: `/pagalba-ukrainai/savanoryste`,
+      pathname: `/pagalba-ukrainai/savanoryste/`,
       title: `Savanorystė`,
     },
   ],
   "/ua/dopomoha/pozhertvy": [
     {
-      pathname: `/ua/dopomoha/volonterstvo`,
+      pathname: `/ua/dopomoha/volonterstvo/`,
       title: `Волонтерство`,
     },
   ],
   "/ua/dopomoha/volonterstvo": [
     {
-      pathname: `/ua/dopomoha/pozhertvy`,
+      pathname: `/ua/dopomoha/pozhertvy/`,
       title: `Пожертви`,
     },
   ],
   "/en/support-ukraine/donation": [
     {
-      pathname: `/en/support-ukraine/volunteering`,
+      pathname: `/en/support-ukraine/volunteering/`,
       title: `Volunteering`,
     },
   ],
   "/en/support-ukraine/volunteering": [
     {
-      pathname: `/en/support-ukraine/donation`,
+      pathname: `/en/support-ukraine/donation/`,
       title: `Donation`,
     },
   ],
@@ -41,31 +41,31 @@ export const ADDITIONAL_NAVIGATION = {
   /* Guide for new arrivals */
   "/guide-for-new-arrivals": [
     {
-      pathname: `/guide-for-persons-with-children`,
+      pathname: `/guide-for-persons-with-children/`,
       title: `Guide for persons with children`,
     },
     {
-      pathname: `/guide-for-persons-with-disabilities`,
+      pathname: `/guide-for-persons-with-disabilities/`,
       title: `Guide for persons with disabilities`,
     },
   ],
   "/en/guide-for-new-arrivals": [
     {
-      pathname: `/en/guide-for-persons-with-children`,
+      pathname: `/en/guide-for-persons-with-children/`,
       title: `Guide for persons with children`,
     },
     {
-      pathname: `/en/guide-for-persons-with-disabilities`,
+      pathname: `/en/guide-for-persons-with-disabilities/`,
       title: `Guide for persons with disabilities`,
     },
   ],
   "/ua/guide-for-new-arrivals": [
     {
-      pathname: `/ua/guide-for-persons-with-children`,
+      pathname: `/ua/guide-for-persons-with-children/`,
       title: `Guide for persons with children`,
     },
     {
-      pathname: `/ua/guide-for-persons-with-disabilities`,
+      pathname: `/ua/guide-for-persons-with-disabilities/`,
       title: `Guide for persons with disabilities`,
     },
   ],
@@ -73,31 +73,31 @@ export const ADDITIONAL_NAVIGATION = {
   /* Guide for persons with children */
   "/guide-for-persons-with-children": [
     {
-      pathname: `/guide-for-persons-with-disabilities`,
+      pathname: `/guide-for-persons-with-disabilities/`,
       title: `Guide for persons with disabilities`,
     },
     {
-      pathname: `/guide-for-new-arrivals`,
+      pathname: `/guide-for-new-arrivals/`,
       title: `Guide for new arrivals`,
     },
   ],
   "/en/guide-for-persons-with-children": [
     {
-      pathname: `/en/guide-for-persons-with-disabilities`,
+      pathname: `/en/guide-for-persons-with-disabilities/`,
       title: `Guide for persons with disabilities`,
     },
     {
-      pathname: `/en/guide-for-new-arrivals`,
+      pathname: `/en/guide-for-new-arrivals/`,
       title: `Guide for new arrivals`,
     },
   ],
   "/ua/guide-for-persons-with-children": [
     {
-      pathname: `/ua/guide-for-persons-with-disabilities`,
+      pathname: `/ua/guide-for-persons-with-disabilities/`,
       title: `Guide for persons with disabilities`,
     },
     {
-      pathname: `/ua/guide-for-new-arrivals`,
+      pathname: `/ua/guide-for-new-arrivals/`,
       title: `Guide for new arrivals`,
     },
   ],
@@ -105,31 +105,31 @@ export const ADDITIONAL_NAVIGATION = {
   /* Guide for persons with disabilities */
   "/guide-for-persons-with-disabilities": [
     {
-      pathname: `/guide-for-new-arrivals`,
+      pathname: `/guide-for-new-arrivals/`,
       title: `Guide for new arrivals`,
     },
     {
-      pathname: `/guide-for-persons-with-children`,
+      pathname: `/guide-for-persons-with-children/`,
       title: `Guide for persons with children`,
     },
   ],
   "/en/guide-for-persons-with-disabilities": [
     {
-      pathname: `/en/guide-for-new-arrivals`,
+      pathname: `/en/guide-for-new-arrivals/`,
       title: `Guide for new arrivals`,
     },
     {
-      pathname: `/en/guide-for-persons-with-children`,
+      pathname: `/en/guide-for-persons-with-children/`,
       title: `Guide for persons with children`,
     },
   ],
   "/ua/guide-for-persons-with-disabilities": [
     {
-      pathname: `/ua/guide-for-new-arrivals`,
+      pathname: `/ua/guide-for-new-arrivals/`,
       title: `Guide for new arrivals`,
     },
     {
-      pathname: `/ua/guide-for-persons-with-children`,
+      pathname: `/ua/guide-for-persons-with-children/`,
       title: `Guide for persons with children`,
     },
   ],

From da75ccc6501d751ff00b8e46ec62f1804cde1fbf Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 15:45:34 +0200
Subject: [PATCH 07/15] #320 fix native details marker showing

---
 src/components/ContentfulModule/StepsModule/StepsModule.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.css b/src/components/ContentfulModule/StepsModule/StepsModule.css
index f660fecb..7148664e 100644
--- a/src/components/ContentfulModule/StepsModule/StepsModule.css
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.css
@@ -21,6 +21,10 @@
     display: flex;
     justify-content: space-between;
 
+    &::-webkit-details-marker {
+      display: none;
+    }
+
     &,
     h3 {
       font-size: 1.5rem;

From d56c3195d44e17380c051a79d1b6a11b1f3a8f14 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Thu, 23 Feb 2023 15:46:01 +0200
Subject: [PATCH 08/15] #320 translate labels.step

---
 src/locales/ua/index.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/ua/index.json b/src/locales/ua/index.json
index 9138487c..edcfc7dc 100644
--- a/src/locales/ua/index.json
+++ b/src/locales/ua/index.json
@@ -23,7 +23,7 @@
     "message": "Повідомлення",
     "source": "Джерело",
     "links": "Посилання",
-    "step": "<translate me>"
+    "step": "Крок"
   },
   "organisation": {
     "about": "Про",

From cf8fd7e4b5199a4ab7ea0f671551e30649d30940 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Fri, 24 Feb 2023 15:22:30 +0200
Subject: [PATCH 09/15] #320 add guides to faq index pages

---
 src/build-utils/pages/faqIndexPage.js             |  6 ++++++
 .../variants/LcmLightBlocks.css                   |  5 +++++
 .../variants/LcmLightBlocks.jsx                   |  5 +++--
 src/templates/faqIndexPage.jsx                    | 15 +++++++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/build-utils/pages/faqIndexPage.js b/src/build-utils/pages/faqIndexPage.js
index 2ad227ce..1ec4d17b 100644
--- a/src/build-utils/pages/faqIndexPage.js
+++ b/src/build-utils/pages/faqIndexPage.js
@@ -8,6 +8,10 @@ const query = (graphql) => {
   {
     ${contentModel.globalNavigation}
     ${contentModel.promoLine}
+    contentfulLinkCollectionModule(contentful_id: {eq: "1JYPNg9dcfazxccUEpijxk"}) {
+      id
+      ${contentModel.linkCollectionModule}
+    }
     allContentfulFaqPage(filter: { node_locale: { eq: "lt-LT" } }) {
       edges {
         node {
@@ -40,6 +44,7 @@ const createFaqIndexPages = (result, createPage) => {
   const globalPromoLine = result.data.allContentfulPromoLineModule.edges.map(
     (edge) => edge.node
   );
+  const personalizedGuidesLinks = result.data.contentfulLinkCollectionModule;
 
   faqIndexPages.forEach((faqIndexPage) => {
     const locale = faqIndexPage?.forceTranslate || faqIndexPage?.node_locale;
@@ -66,6 +71,7 @@ const createFaqIndexPages = (result, createPage) => {
           navigation,
           promoLine,
           rootPath: pagePath,
+          personalizedGuidesLinks,
         },
       });
     }
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css
index a7759a34..e98ce70b 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.css
@@ -3,6 +3,11 @@
   overflow: hidden;
   width: 100%;
 
+  /* @todo: this is a temporary solution for quickly adding padding */
+  &--with-padding {
+    padding: var(--s__alt-padding) 0;
+  }
+
   &__heading {
     font-size: 1.8rem;
     margin: 0;
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
index 22d8d290..2ad246f7 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";
 
 import Button from "../../../Button";
@@ -10,9 +11,9 @@ import {
 
 import "./LcmLightBlocks.css";
 
-const LcmLightBlocks = ({ heading, subheading, links }) => {
+const LcmLightBlocks = ({ heading, subheading, links, className }) => {
   return (
-    <Section className="LcmLightBlocks">
+    <Section className={classNames(`LcmLightBlocks`, className)}>
       <Constraint>
         {!!heading && <h2 className="LcmLightBlocks__heading">{heading}</h2>}
         {!!subheading && (
diff --git a/src/templates/faqIndexPage.jsx b/src/templates/faqIndexPage.jsx
index d5311257..ce1c376a 100644
--- a/src/templates/faqIndexPage.jsx
+++ b/src/templates/faqIndexPage.jsx
@@ -16,6 +16,11 @@ import {
   promoLinePropTypes,
 } from "../helpers/genericPropTypes";
 import { FaqCategoriesPropType } from "../components/Faq/FaqPropTypes";
+import {
+  LinkCollectionModule,
+  LinkCollectionModulePropTypes,
+  LinkCollectionModuleDefaultProps,
+} from "../components/ContentfulModule/LinkCollectionModule";
 
 const FaqIndexPage = ({ path, pageContext }) => {
   const {
@@ -29,6 +34,7 @@ const FaqIndexPage = ({ path, pageContext }) => {
     categories,
     rootPath,
     promoLine,
+    personalizedGuidesLinks,
     breadcrumb: { crumbs },
   } = pageContext;
 
@@ -54,6 +60,13 @@ const FaqIndexPage = ({ path, pageContext }) => {
           <FaqNav rootPath={rootPath} categories={categories} pathname={path} />
         </Constraint>
       )}
+
+      {personalizedGuidesLinks && (
+        <LinkCollectionModule
+          {...personalizedGuidesLinks}
+          className="LcmLightBlocks--with-padding"
+        />
+      )}
     </Layout>
   );
 };
@@ -83,6 +96,7 @@ FaqIndexPage.propTypes = {
       raw: PropTypes.string,
     }),
     categories: FaqCategoriesPropType,
+    personalizedGuidesLinks: PropTypes.shape(LinkCollectionModulePropTypes),
   }),
 };
 
@@ -93,6 +107,7 @@ FaqIndexPage.defaultProps = {
   },
   organisations: [],
   navData: [],
+  personalizedGuidesLinks: LinkCollectionModuleDefaultProps,
 };
 
 export default FaqIndexPage;

From af64dbdb044cd57c28e3405976386004d9db8736 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Tue, 28 Feb 2023 14:52:00 +0200
Subject: [PATCH 10/15] SEO-320: force gatsby clean

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 03708477..b2eb423d 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
-    "build": "gatsby build",
+    "build": "gatsby clean && gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "format": "eslint \"src/**/*.{js,jsx}\" --fix && stylelint \"src/**/*.css\" --fix",

From a44ba3eee2eb0d37be03a259fb4cd626be2670b4 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Tue, 28 Feb 2023 14:56:04 +0200
Subject: [PATCH 11/15] Revert "SEO-320: force gatsby clean"

This reverts commit af64dbdb044cd57c28e3405976386004d9db8736.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b2eb423d..03708477 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
-    "build": "gatsby clean && gatsby build",
+    "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "format": "eslint \"src/**/*.{js,jsx}\" --fix && stylelint \"src/**/*.css\" --fix",

From ded1167333b669a1b0a8e648eed4b0d7ed97a88e Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Wed, 1 Mar 2023 12:57:15 +0200
Subject: [PATCH 12/15] #320 implement fullWidth toggle for most modules

---
 .../helpers/contentfulContentModel.js         |  8 ++
 .../EventsModule/EventsModule.jsx             | 70 ++++++++-------
 .../EventsModule/EventsModulePropTypes.js     |  2 +
 .../FaqCategoriesModule.jsx                   | 23 ++++-
 .../FaqCategoriesModulePropTypes.js           | 10 ++-
 .../FaqCategoriesModule/index.js              | 11 ++-
 .../LinkCollectionModulePropTypes.js          |  2 +
 .../variants/LcmDefault.jsx                   | 34 +++----
 .../variants/LcmLightBlocks.jsx               | 12 ++-
 .../PartnersModule/PartnersModule.jsx         | 48 +++++-----
 .../PartnersModule/PartnersModulePropTypes.js |  2 +
 .../PromotionBannerModule.jsx                 |  6 +-
 .../PromotionBannerModulePropTypes.js         |  2 +
 .../SlidingNavBlock/SlidingNavBlock.jsx       | 27 +++---
 .../StepsModule/StepsModule.jsx               | 89 ++++++++++---------
 .../StepsModule/StepsModulePropTypes.js       |  2 +
 src/templates/modularPage.jsx                 | 33 +++----
 17 files changed, 230 insertions(+), 151 deletions(-)

diff --git a/src/build-utils/helpers/contentfulContentModel.js b/src/build-utils/helpers/contentfulContentModel.js
index b94038f0..fb9d287a 100644
--- a/src/build-utils/helpers/contentfulContentModel.js
+++ b/src/build-utils/helpers/contentfulContentModel.js
@@ -40,6 +40,7 @@ const linkCollectionModule = `
       ${link}
     }
   }
+  fullWidth
 `;
 
 const organisation = `
@@ -84,6 +85,7 @@ const eventsModule = `
       ${eventItem}
     }
   }
+  fullWidth
 `;
 
 const chip = `
@@ -101,6 +103,7 @@ const chipModule = `
       ${chip}
     }
   }
+  fullWidth
 `;
 
 const slidingNavBlock = `
@@ -134,6 +137,7 @@ const resourceListModule = `
       ${resourceItem}
     }
   }
+  fullWidth
 `;
 
 const helpSearchModule = `
@@ -190,6 +194,7 @@ const partnersModule = `
       }
     }
   }
+  fullWidth
 `;
 
 const faqCategoriesModule = `
@@ -201,6 +206,7 @@ const faqCategoriesModule = `
     pageHeading
     iconType
   }
+  fullWidth
 `;
 
 // the contentful_id is the same as the entry id in URL
@@ -282,6 +288,7 @@ const promotionBannerModule = `
       }
     }
   }
+  fullWidth
 `;
 
 const stepsModule = `
@@ -296,6 +303,7 @@ const stepsModule = `
       }
     }
   }
+  fullWidth
 `;
 
 module.exports = {
diff --git a/src/components/ContentfulModule/EventsModule/EventsModule.jsx b/src/components/ContentfulModule/EventsModule/EventsModule.jsx
index 871b8473..37a85fe7 100644
--- a/src/components/ContentfulModule/EventsModule/EventsModule.jsx
+++ b/src/components/ContentfulModule/EventsModule/EventsModule.jsx
@@ -1,11 +1,15 @@
 import React from "react";
+import classNames from "classnames";
+
 import { EventsModulePropTypes } from "./EventsModulePropTypes";
 import EventCardList from "./EventCardList";
 import EventCard from "./EventCard";
 import DetailsWrapper from "../../DetailsWrapper";
+import Constraint from "../../Constraint";
+
 import { getTranslatedText } from "../../../utils/getTranslatedText";
 
-const EventsModule = ({ events, locale }) => {
+const EventsModule = ({ events, locale, fullWidth }) => {
   const currentDate = new Date();
   const upcomingEvents = [];
   const previousEvents = [];
@@ -35,38 +39,40 @@ const EventsModule = ({ events, locale }) => {
   starredEvents.forEach(categorizeEvent);
 
   return (
-    <div className="EventsModule">
-      <h2>{getTranslatedText(`events.upcomingEvents`)}</h2>
-      <EventCardList>
-        {upcomingEvents.length ? (
-          upcomingEvents.map((event, i) => {
-            return <EventCard key={i} {...event} locale={locale} />;
-          })
-        ) : (
-          <p>{getTranslatedText(`events.noEvents`)}</p>
-        )}
-      </EventCardList>
+    <Constraint className={classNames({ "Constraint--full-width": fullWidth })}>
+      <div className="EventsModule">
+        <h2>{getTranslatedText(`events.upcomingEvents`)}</h2>
+        <EventCardList>
+          {upcomingEvents.length ? (
+            upcomingEvents.map((event, i) => {
+              return <EventCard key={i} {...event} locale={locale} />;
+            })
+          ) : (
+            <p>{getTranslatedText(`events.noEvents`)}</p>
+          )}
+        </EventCardList>
 
-      {!!previousEvents.length && (
-        <DetailsWrapper
-          tag="h2"
-          summary={getTranslatedText(`events.previousEvents`)}
-        >
-          <EventCardList>
-            {previousEvents.map((event, i) => {
-              return (
-                <EventCard
-                  key={i}
-                  className="EventCard--previous"
-                  {...event}
-                  locale={locale}
-                />
-              );
-            })}
-          </EventCardList>
-        </DetailsWrapper>
-      )}
-    </div>
+        {!!previousEvents.length && (
+          <DetailsWrapper
+            tag="h2"
+            summary={getTranslatedText(`events.previousEvents`)}
+          >
+            <EventCardList>
+              {previousEvents.map((event, i) => {
+                return (
+                  <EventCard
+                    key={i}
+                    className="EventCard--previous"
+                    {...event}
+                    locale={locale}
+                  />
+                );
+              })}
+            </EventCardList>
+          </DetailsWrapper>
+        )}
+      </div>
+    </Constraint>
   );
 };
 
diff --git a/src/components/ContentfulModule/EventsModule/EventsModulePropTypes.js b/src/components/ContentfulModule/EventsModule/EventsModulePropTypes.js
index f8e5d431..e7f170e1 100644
--- a/src/components/ContentfulModule/EventsModule/EventsModulePropTypes.js
+++ b/src/components/ContentfulModule/EventsModule/EventsModulePropTypes.js
@@ -20,6 +20,7 @@ const EventsModulePropTypes = {
     type: PropTypes.string.isRequired,
   }).isRequired,
   events: PropTypes.arrayOf(PropTypes.shape(EventItemPropTypes)),
+  fullWidth: PropTypes.bool,
 };
 
 const EventsModuleDefaultProps = {
@@ -36,6 +37,7 @@ const EventsModuleDefaultProps = {
       eventUrl: ``,
     },
   ],
+  fullWidth: false,
 };
 
 export { EventsModuleDefaultProps, EventsModulePropTypes, EventItemPropTypes };
diff --git a/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx b/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx
index 749729b6..689f77f1 100644
--- a/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx
+++ b/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx
@@ -1,19 +1,32 @@
 import React from "react";
+import classNames from "classnames";
 
 import { FaqNav } from "../../Faq";
 import Section from "../../Section";
 import Constraint from "../../Constraint";
 import Link from "../../Link";
-import { getTranslatedText } from "../../../utils/getTranslatedText";
 import Icon from "../../Icon";
 
+import { getTranslatedText } from "../../../utils/getTranslatedText";
+
 import "./FaqCategoriesModule.css";
-import { FaqCategoriesModulePropTypes } from "./FaqCategoriesModulePropTypes";
+import {
+  FaqCategoriesModuleDefaultProps,
+  FaqCategoriesModulePropTypes,
+} from "./FaqCategoriesModulePropTypes";
 
-const FaqCategoriesModule = ({ heading, seeAllLink, categories, pathname }) => {
+const FaqCategoriesModule = ({
+  heading,
+  seeAllLink,
+  categories,
+  pathname,
+  fullWidth,
+}) => {
   return (
     <Section className="FaqCategoriesModule">
-      <Constraint>
+      <Constraint
+        className={classNames({ "Constraint--full-width": fullWidth })}
+      >
         {heading && <h2>{heading}</h2>}
         <FaqNav
           rootPath={seeAllLink}
@@ -36,4 +49,6 @@ const FaqCategoriesModule = ({ heading, seeAllLink, categories, pathname }) => {
 
 FaqCategoriesModule.propTypes = FaqCategoriesModulePropTypes;
 
+FaqCategoriesModule.defaultProps = FaqCategoriesModuleDefaultProps;
+
 export default FaqCategoriesModule;
diff --git a/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModulePropTypes.js b/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModulePropTypes.js
index f61d5600..073eb496 100644
--- a/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModulePropTypes.js
+++ b/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModulePropTypes.js
@@ -6,6 +6,14 @@ const FaqCategoriesModulePropTypes = {
   seeAllLink: PropTypes.string,
   categories: FaqCategoriesPropType.isRequired,
   pathname: PropTypes.string,
+  fullWidth: PropTypes.bool,
 };
 
-export { FaqCategoriesModulePropTypes };
+const FaqCategoriesModuleDefaultProps = {
+  heading: ``,
+  seeAllLink: ``,
+  pathname: ``,
+  fullWidth: false,
+};
+
+export { FaqCategoriesModulePropTypes, FaqCategoriesModuleDefaultProps };
diff --git a/src/components/ContentfulModule/FaqCategoriesModule/index.js b/src/components/ContentfulModule/FaqCategoriesModule/index.js
index 788cf6e7..895a9c5d 100644
--- a/src/components/ContentfulModule/FaqCategoriesModule/index.js
+++ b/src/components/ContentfulModule/FaqCategoriesModule/index.js
@@ -1,4 +1,11 @@
 import FaqCategoriesModule from "./FaqCategoriesModule";
-import { FaqCategoriesModulePropTypes } from "./FaqCategoriesModulePropTypes";
+import {
+  FaqCategoriesModulePropTypes,
+  FaqCategoriesModuleDefaultProps,
+} from "./FaqCategoriesModulePropTypes";
 
-export { FaqCategoriesModule, FaqCategoriesModulePropTypes };
+export {
+  FaqCategoriesModule,
+  FaqCategoriesModulePropTypes,
+  FaqCategoriesModuleDefaultProps,
+};
diff --git a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js b/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js
index 7da37cd4..9cb93b41 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js
+++ b/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js
@@ -11,12 +11,14 @@ const LinkCollectionModulePropTypes = {
       url: PropTypes.string.isRequired,
     })
   ).isRequired,
+  fullWidth: PropTypes.bool,
 };
 
 const LinkCollectionModuleDefaultProps = {
   heading: ``,
   subheading: ``,
   variant: `default`,
+  fullWidth: false,
 };
 
 export { LinkCollectionModulePropTypes, LinkCollectionModuleDefaultProps };
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx
index 7eca8e47..859071f5 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmDefault.jsx
@@ -1,29 +1,33 @@
 import React from "react";
+import classNames from "classnames";
 
 import Button from "../../../Button";
 import {
   LinkCollectionModuleDefaultProps,
   LinkCollectionModulePropTypes,
 } from "../LinkCollectionModulePropTypes";
+import Constraint from "../../../Constraint";
 
 import "./LcmDefault.css";
 
-const LcmDefault = ({ heading, links }) => {
+const LcmDefault = ({ heading, links, fullWidth }) => {
   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>
+    <Constraint className={classNames({ "Constraint--full-width": fullWidth })}>
+      <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>
+    </Constraint>
   );
 };
 
diff --git a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
index 2ad246f7..31c74a75 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
+++ b/src/components/ContentfulModule/LinkCollectionModule/variants/LcmLightBlocks.jsx
@@ -11,10 +11,18 @@ import {
 
 import "./LcmLightBlocks.css";
 
-const LcmLightBlocks = ({ heading, subheading, links, className }) => {
+const LcmLightBlocks = ({
+  heading,
+  subheading,
+  links,
+  className,
+  fullWidth,
+}) => {
   return (
     <Section className={classNames(`LcmLightBlocks`, className)}>
-      <Constraint>
+      <Constraint
+        className={classNames({ "Constraint--full-width": fullWidth })}
+      >
         {!!heading && <h2 className="LcmLightBlocks__heading">{heading}</h2>}
         {!!subheading && (
           <p className="LcmLightBlocks__subheading">{subheading}</p>
diff --git a/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx b/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx
index bf354c89..a732da4b 100644
--- a/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx
+++ b/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import classNames from "classnames";
 
 import PartnerList from "./PartnerList";
 import Partner from "./Partner";
@@ -6,34 +7,37 @@ import {
   PartnersModuleDefaultProps,
   PartnersModulePropTypes,
 } from "./PartnersModulePropTypes";
+import Constraint from "../../Constraint";
 
 import "./PartnersModule.css";
 
-const PartnersModule = ({ heading, partnerCollections }) => {
+const PartnersModule = ({ heading, partnerCollections, fullWidth }) => {
   return (
-    <div className="PartnersModule">
-      <h2 className="PartnersModule__title">{heading}</h2>
+    <Constraint className={classNames({ "Constraint--full-width": fullWidth })}>
+      <div className="PartnersModule">
+        <h2 className="PartnersModule__title">{heading}</h2>
 
-      <div className="PartnersModule__category-wrapper">
-        {partnerCollections.map((collection) => {
-          if (!collection?.partners?.at(0)) {
-            return null;
-          }
-          return (
-            <div key={collection.id} className="PartnersModule__category">
-              <h3 className="PartnersModule__category-title">
-                {collection.category}
-              </h3>
-              <PartnerList>
-                {collection.partners.map((partner) => {
-                  return <Partner key={partner.id} {...partner} />;
-                })}
-              </PartnerList>
-            </div>
-          );
-        })}
+        <div className="PartnersModule__category-wrapper">
+          {partnerCollections.map((collection) => {
+            if (!collection?.partners?.at(0)) {
+              return null;
+            }
+            return (
+              <div key={collection.id} className="PartnersModule__category">
+                <h3 className="PartnersModule__category-title">
+                  {collection.category}
+                </h3>
+                <PartnerList>
+                  {collection.partners.map((partner) => {
+                    return <Partner key={partner.id} {...partner} />;
+                  })}
+                </PartnerList>
+              </div>
+            );
+          })}
+        </div>
       </div>
-    </div>
+    </Constraint>
   );
 };
 
diff --git a/src/components/ContentfulModule/PartnersModule/PartnersModulePropTypes.js b/src/components/ContentfulModule/PartnersModule/PartnersModulePropTypes.js
index fe7b5d94..2af4bb90 100644
--- a/src/components/ContentfulModule/PartnersModule/PartnersModulePropTypes.js
+++ b/src/components/ContentfulModule/PartnersModule/PartnersModulePropTypes.js
@@ -15,10 +15,12 @@ const PartnersModulePropTypes = {
       partners: PropTypes.arrayOf(PropTypes.shape(PartnerPropTypes)),
     })
   ),
+  fullWidth: PropTypes.bool,
 };
 
 const PartnersModuleDefaultProps = {
   partnerCollections: [],
+  fullWidth: false,
 };
 
 export {
diff --git a/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx b/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx
index f4d47a21..ac6c11d9 100644
--- a/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx
+++ b/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx
@@ -11,16 +11,20 @@ import "./PromotionBannerModule.css";
 import Thumbnail from "./Thumbnail";
 import Organisation from "./ContentComponents/Organisation";
 import EventItem from "./ContentComponents/EventItem";
+import classNames from "classnames";
 
 const PromotionBannerModule = ({
   heading,
   thumbnail,
   thumbnailUrl,
   content,
+  fullWidth,
 }) => {
   return (
     <Section>
-      <Constraint>
+      <Constraint
+        className={classNames({ "Constraint--full-width": fullWidth })}
+      >
         <div className="PromotionBannerModule">
           <Thumbnail img={thumbnail} url={thumbnailUrl} />
           <div className="PromotionBannerModule__content">
diff --git a/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModulePropTypes.js b/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModulePropTypes.js
index 21cbdeb7..5fa34a8a 100644
--- a/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModulePropTypes.js
+++ b/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModulePropTypes.js
@@ -14,11 +14,13 @@ const PromotionBannerModulePropTypes = {
       PropTypes.shape(EventItemPropTypes),
     ])
   ),
+  fullWidth: PropTypes.bool,
 };
 
 const PromotionBannerModuleDefaultProps = {
   thumbnailUrl: ``,
   content: [],
+  fullWidth: false,
 };
 
 export { PromotionBannerModuleDefaultProps, PromotionBannerModulePropTypes };
diff --git a/src/components/ContentfulModule/SlidingNavBlock/SlidingNavBlock.jsx b/src/components/ContentfulModule/SlidingNavBlock/SlidingNavBlock.jsx
index 5ff500a3..ad745b69 100644
--- a/src/components/ContentfulModule/SlidingNavBlock/SlidingNavBlock.jsx
+++ b/src/components/ContentfulModule/SlidingNavBlock/SlidingNavBlock.jsx
@@ -4,6 +4,7 @@ import "./SlidingNavBlock.css";
 import Icon from "../../Icon";
 import { ChipModule } from "../ChipModule";
 import { SlidingNavBlockPropTypes } from "./SlidingNavBlockPropTypes";
+import Constraint from "../../Constraint";
 
 const SlidingNavBlock = ({ id = ``, children, title, icon, data }) => {
   const getModule = (data) => {
@@ -16,20 +17,22 @@ const SlidingNavBlock = ({ id = ``, children, title, icon, data }) => {
   };
 
   return (
-    <div id={id} className="SlidingNavBlock">
-      <div className="SlidingNavBlock__title-wrapper">
-        {title && (
-          <h2 className="SlidingNavBlock__title">
-            {!!icon && <Icon type={icon} />}
-            {title}
-          </h2>
+    <Constraint className="Constraint--sliding-nav">
+      <div id={id} className="SlidingNavBlock">
+        <div className="SlidingNavBlock__title-wrapper">
+          {title && (
+            <h2 className="SlidingNavBlock__title">
+              {!!icon && <Icon type={icon} />}
+              {title}
+            </h2>
+          )}
+        </div>
+        {children && <div className="SlidingNavBlock__content">{children}</div>}
+        {!children && data && (
+          <div className="SlidingNavBlock__content">{getModule(data)}</div>
         )}
       </div>
-      {children && <div className="SlidingNavBlock__content">{children}</div>}
-      {!children && data && (
-        <div className="SlidingNavBlock__content">{getModule(data)}</div>
-      )}
-    </div>
+    </Constraint>
   );
 };
 
diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.jsx b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
index 0299ed2a..a83c11c4 100644
--- a/src/components/ContentfulModule/StepsModule/StepsModule.jsx
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
@@ -11,8 +11,10 @@ import "./StepsModule.css";
 import { useEffect } from "react";
 import { openDetailsByHash } from "../../../helpers/handlers";
 import Button from "../../Button";
+import Constraint from "../../Constraint";
+import classNames from "classnames";
 
-const StepsModule = ({ steps }) => {
+const StepsModule = ({ steps, fullWidth }) => {
   useEffect(() => {
     window.addEventListener(`hashchange`, openDetailsByHash);
     openDetailsByHash();
@@ -23,48 +25,53 @@ const StepsModule = ({ steps }) => {
   }, []);
 
   return (
-    <div className="StepsModule">
-      {steps.map((step, index) => {
-        const tabId = `tab-${index + 1}`;
-        return (
-          <details key={step.id} id={tabId} open={index === 0}>
-            <summary>
-              <h3>
-                <b>
-                  {getTranslatedText(`labels.step`)} {index + 1}.
-                </b>
-                {` `}
-                {step.question}
-              </h3>
-            </summary>
-            <div className="StepsModule__content">
-              {formatRichText(step.answer.raw)}
-              <div className="StepsModule__actions">
-                {step?.additionalLink && (
-                  <Button color="primary-outline" to={step.additionalLink.url}>
-                    {step.additionalLink.label}
-                  </Button>
-                )}
-                <div className="StepsModule__copy-action">
-                  <a
-                    href={`#${tabId}`}
-                    data-copied={getTranslatedText(
-                      `actions.copyLinkPopupLabel`
-                    )}
-                    onClick={(e) => {
-                      handleAnchorClick(e);
-                    }}
-                    className="copy"
-                  >
-                    {getTranslatedText(`actions.copyLink`)}
-                  </a>
+    <Constraint className={classNames({ "Constraint--full-width": fullWidth })}>
+      <div className="StepsModule">
+        {steps.map((step, index) => {
+          const tabId = `tab-${index + 1}`;
+          return (
+            <details key={step.id} id={tabId} open={index === 0}>
+              <summary>
+                <h3>
+                  <b>
+                    {getTranslatedText(`labels.step`)} {index + 1}.
+                  </b>
+                  {` `}
+                  {step.question}
+                </h3>
+              </summary>
+              <div className="StepsModule__content">
+                {formatRichText(step.answer.raw)}
+                <div className="StepsModule__actions">
+                  {step?.additionalLink && (
+                    <Button
+                      color="primary-outline"
+                      to={step.additionalLink.url}
+                    >
+                      {step.additionalLink.label}
+                    </Button>
+                  )}
+                  <div className="StepsModule__copy-action">
+                    <a
+                      href={`#${tabId}`}
+                      data-copied={getTranslatedText(
+                        `actions.copyLinkPopupLabel`
+                      )}
+                      onClick={(e) => {
+                        handleAnchorClick(e);
+                      }}
+                      className="copy"
+                    >
+                      {getTranslatedText(`actions.copyLink`)}
+                    </a>
+                  </div>
                 </div>
               </div>
-            </div>
-          </details>
-        );
-      })}
-    </div>
+            </details>
+          );
+        })}
+      </div>
+    </Constraint>
   );
 };
 
diff --git a/src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js b/src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js
index 22d9b6c3..005d97e9 100644
--- a/src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js
+++ b/src/components/ContentfulModule/StepsModule/StepsModulePropTypes.js
@@ -5,10 +5,12 @@ const StepsModulePropTypes = {
   steps: PropTypes.arrayOf(
     PropTypes.oneOfType([PropTypes.shape(FaqItemPropTypes)])
   ),
+  fullWidth: PropTypes.bool,
 };
 
 const StepsModuleDefaultProps = {
   steps: [],
+  fullWidth: false,
 };
 
 export { StepsModuleDefaultProps, StepsModulePropTypes };
diff --git a/src/templates/modularPage.jsx b/src/templates/modularPage.jsx
index cb6e6e35..dba1a926 100644
--- a/src/templates/modularPage.jsx
+++ b/src/templates/modularPage.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import classNames from "classnames";
 
 import Layout from "../components/Layout";
 import Constraint from "../components/Constraint";
@@ -35,7 +34,6 @@ const ModularPage = ({ path, pageContext }) => {
     modules,
     slidingNavData,
     includeContactForm,
-    fullWidthModules,
     showBreadcrumbs,
     stickyHeader,
     promoLine,
@@ -83,24 +81,21 @@ const ModularPage = ({ path, pageContext }) => {
         {pageDescription?.raw && formatRichText(pageDescription.raw)}
       </Constraint>
 
-      <Constraint
-        className={classNames({
-          "Constraint--sliding-nav": slidingNavData,
-          "Constraint--full-width": fullWidthModules,
+      {slidingNavData && (
+        <Constraint className="Constraint--sliding-nav">
+          <SlidingNavigation data={slidingNavData} />
+        </Constraint>
+      )}
+      {!!modules?.at(0) &&
+        modules.map((module) => {
+          return (
+            <ContentfulModule
+              key={module.id}
+              module={supplementModule(module)}
+              pathname={path}
+            />
+          );
         })}
-      >
-        {slidingNavData && <SlidingNavigation data={slidingNavData} />}
-        {!!modules?.at(0) &&
-          modules.map((module) => {
-            return (
-              <ContentfulModule
-                key={module.id}
-                module={supplementModule(module)}
-                pathname={path}
-              />
-            );
-          })}
-      </Constraint>
     </Layout>
   );
 };

From e79dc9cac1d3ac85dce199df36dadbb505064552 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Wed, 15 Mar 2023 13:15:53 +0200
Subject: [PATCH 13/15] #320 add fullWidth queries

---
 .../helpers/contentfulContentModel.js         | 329 ------------------
 .../ChipModule/ChipModule.jsx                 |   1 +
 .../EventsModule/EventsModule.jsx             |   1 +
 .../FaqCategoriesModule.jsx                   |   1 +
 .../LinkCollectionModule.jsx                  |   2 +
 .../PartnersModule/PartnersModule.jsx         |   1 +
 .../PromotionBannerModule.jsx                 |   1 +
 .../ResourceListModule/ResourceListModule.jsx |   1 +
 8 files changed, 8 insertions(+), 329 deletions(-)
 delete mode 100644 src/build-utils/helpers/contentfulContentModel.js

diff --git a/src/build-utils/helpers/contentfulContentModel.js b/src/build-utils/helpers/contentfulContentModel.js
deleted file mode 100644
index fb9d287a..00000000
--- a/src/build-utils/helpers/contentfulContentModel.js
+++ /dev/null
@@ -1,329 +0,0 @@
-// not querying heroTitle yet because none of the heros have a title
-const hero = `
-  heroImage {
-    gatsbyImageData(
-      width: 1440
-      height: 148
-      placeholder: BLURRED
-      formats: WEBP
-      layout: FULL_WIDTH
-    )
-  }
-`;
-
-const seo = `
-  metaTitle
-  metaDescription
-`;
-
-const link = `
-  id
-  label
-  url
-  sublabel
-`;
-
-const linkCollectionModule = `
-  heading
-  subheading
-  variant
-  image {
-    gatsbyImageData(
-      formats: WEBP
-      height: 440
-      width: 611
-      placeholder: BLURRED
-    )
-  }
-  links {
-    ... on ContentfulLink {
-      ${link}
-    }
-  }
-  fullWidth
-`;
-
-const organisation = `
-  id
-  name
-  organisationType
-  organisationLogo {
-    gatsbyImageData(height: 30, placeholder: BLURRED, formats: WEBP)
-  }
-  location
-  description {
-    raw
-  }
-  purpose {
-    raw
-  }
-  otherInformation {
-    raw
-  }
-  websiteUrl
-  actionUrl
-`;
-
-const eventItem = `
-  id
-  starred
-  eventType
-  title
-  organizer
-  startDate
-  endDate
-  location
-  description {
-    raw
-  }
-  eventUrl
-`;
-
-const eventsModule = `
-  events {
-    ... on ContentfulEventItem {
-      ${eventItem}
-    }
-  }
-  fullWidth
-`;
-
-const chip = `
-  id
-  heading
-  subheading
-  webUrl
-  facebookUrl
-  twitterUrl
-`;
-
-const chipModule = `
-  chips {
-    ... on ContentfulChip {
-      ${chip}
-    }
-  }
-  fullWidth
-`;
-
-const slidingNavBlock = `
-  title
-  icon
-  data {
-    ... on ContentfulChipModule {
-      id
-      internal {
-        type
-      }
-      ${chipModule}
-    }
-  }
-`;
-
-const resourceItem = `
-  id
-  label
-  subtext
-  sourceUrl
-`;
-
-const resourceListModule = `
-  heading
-  subheadingRich: subheading {
-    raw
-  }
-  resources {
-    ... on ContentfulResourceItem {
-      ${resourceItem}
-    }
-  }
-  fullWidth
-`;
-
-const helpSearchModule = `
-  defaultResultsLang
-`;
-
-const faqItem = `
-  question
-  answer {
-    raw
-    references {
-      ... on ContentfulAsset {
-        id
-        contentful_id
-        internal {
-          type
-        }
-        file {
-          contentType
-        }
-        gatsbyImageData(formats: WEBP, placeholder: BLURRED)
-      }
-      ... on ContentfulResourceItem {
-        contentful_id
-        internal {
-          type
-        }
-        ${resourceItem}
-      }
-    }
-  }
-  additionalLink {
-    ... on ContentfulLink {
-      ${link}
-    }
-  }
-`;
-
-const partnersModule = `
-  heading
-  partnerCollections {
-    ... on ContentfulPartnerCollection {
-      id
-      category
-      partners {
-        ... on ContentfulPartner {
-          id
-          label
-          url
-          logo {
-            gatsbyImageData(height: 80, placeholder: BLURRED, formats: WEBP)
-          }
-        }
-      }
-    }
-  }
-  fullWidth
-`;
-
-const faqCategoriesModule = `
-  heading
-  seeAllLink
-  categories {
-    id
-    slug
-    pageHeading
-    iconType
-  }
-  fullWidth
-`;
-
-// the contentful_id is the same as the entry id in URL
-const globalNavigation = `
-  allContentfulNavigation(filter: {contentful_id: { eq: "1yKThqiNevVEU4BCn7zZ9y" }}) {
-    edges {
-      node {
-        node_locale
-        items {
-          id
-          title
-          slug
-          items {
-            ... on ContentfulNavigationItem {
-              id
-              title
-              slug
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-const pageData = `
-  id
-  slug
-  pageHeading
-  pageDescription {
-    raw
-  }
-`;
-
-const promoLine = `
-  allContentfulPromoLineModule(filter: { contentful_id: { eq: "1zlccw24eib2cd3wTXRHfk" }}) {
-    edges {
-      node {
-        id
-        node_locale
-        contentful_id
-        heading
-        subheading
-        headingLink
-        linkButtons {
-          ... on ContentfulLink {
-            ${link}
-          }
-        }
-      }
-    }
-  }
-`;
-
-const promotionBannerModule = `
-  heading
-  thumbnail {
-    gatsbyImageData(
-      formats: WEBP
-      height: 600
-      width: 600
-      placeholder: BLURRED
-    )
-  }
-  thumbnailUrl
-  content {
-    ... on Node {
-      id
-      internal {
-        type
-      }
-      ... on ContentfulEventItem {
-        contentful_id
-        ${eventItem}
-      }
-      ... on ContentfulOrganisation {
-        contentful_id
-        ${organisation}
-      }
-    }
-  }
-  fullWidth
-`;
-
-const stepsModule = `
-  steps {
-    ... on Node {
-      id
-      internal {
-        type
-      }
-      ... on ContentfulFaqItem {
-        ${faqItem}
-      }
-    }
-  }
-  fullWidth
-`;
-
-module.exports = {
-  hero,
-  seo,
-  organisation,
-  link,
-  linkCollectionModule,
-  eventItem,
-  eventsModule,
-  slidingNavBlock,
-  chipModule,
-  partnersModule,
-  faqItem,
-  faqCategoriesModule,
-  resourceListModule,
-  helpSearchModule,
-  globalNavigation,
-  pageData,
-  promoLine,
-  promotionBannerModule,
-  stepsModule,
-};
diff --git a/src/components/ContentfulModule/ChipModule/ChipModule.jsx b/src/components/ContentfulModule/ChipModule/ChipModule.jsx
index 0cd49644..6b1027b2 100644
--- a/src/components/ContentfulModule/ChipModule/ChipModule.jsx
+++ b/src/components/ContentfulModule/ChipModule/ChipModule.jsx
@@ -23,5 +23,6 @@ export const query = graphql`
     chips {
       ...ChipFragment
     }
+    fullWidth
   }
 `;
diff --git a/src/components/ContentfulModule/EventsModule/EventsModule.jsx b/src/components/ContentfulModule/EventsModule/EventsModule.jsx
index 7d1788db..90c46377 100644
--- a/src/components/ContentfulModule/EventsModule/EventsModule.jsx
+++ b/src/components/ContentfulModule/EventsModule/EventsModule.jsx
@@ -86,5 +86,6 @@ export const query = graphql`
     events {
       ...EventItemFragment
     }
+    fullWidth
   }
 `;
diff --git a/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx b/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx
index baf46b39..188c2b12 100644
--- a/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx
+++ b/src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx
@@ -65,5 +65,6 @@ export const query = graphql`
       pageHeading
       iconType
     }
+    fullWidth
   }
 `;
diff --git a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx b/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx
index ed0973d8..74558ccc 100644
--- a/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx
+++ b/src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx
@@ -40,6 +40,8 @@ export const query = graphql`
         placeholder: BLURRED
       )
     }
+    fullWidth
+    variant
     links {
       ...LinkFragment
     }
diff --git a/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx b/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx
index f57dbff0..c668daaa 100644
--- a/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx
+++ b/src/components/ContentfulModule/PartnersModule/PartnersModule.jsx
@@ -67,5 +67,6 @@ export const query = graphql`
         }
       }
     }
+    fullWidth
   }
 `;
diff --git a/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx b/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx
index 69144907..3edadce4 100644
--- a/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx
+++ b/src/components/ContentfulModule/PromotionBannerModule/PromotionBannerModule.jsx
@@ -79,5 +79,6 @@ export const query = graphql`
         ...OrganisationFragment
       }
     }
+    fullWidth
   }
 `;
diff --git a/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx b/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx
index 7555025d..b7d9d4f0 100644
--- a/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx
+++ b/src/components/ContentfulModule/ResourceListModule/ResourceListModule.jsx
@@ -43,5 +43,6 @@ export const query = graphql`
     resources {
       ...ResourceItemFragment
     }
+    fullWidth
   }
 `;

From c060ff605012c41183ed538085952577af37dcea Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Wed, 15 Mar 2023 13:23:31 +0200
Subject: [PATCH 14/15] #320 fix steps module query

---
 .../ContentfulModule/StepsModule/StepsModule.jsx  | 15 +++++++++++++++
 src/templates/modularPage.jsx                     |  1 +
 2 files changed, 16 insertions(+)

diff --git a/src/components/ContentfulModule/StepsModule/StepsModule.jsx b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
index a83c11c4..ca52c4de 100644
--- a/src/components/ContentfulModule/StepsModule/StepsModule.jsx
+++ b/src/components/ContentfulModule/StepsModule/StepsModule.jsx
@@ -13,6 +13,7 @@ import { openDetailsByHash } from "../../../helpers/handlers";
 import Button from "../../Button";
 import Constraint from "../../Constraint";
 import classNames from "classnames";
+import { graphql } from "gatsby";
 
 const StepsModule = ({ steps, fullWidth }) => {
   useEffect(() => {
@@ -80,3 +81,17 @@ StepsModule.propTypes = StepsModulePropTypes;
 StepsModule.defaultProps = StepsModuleDefaultProps;
 
 export default StepsModule;
+
+export const query = graphql`
+  fragment StepsModuleFragment on ContentfulStepsModule {
+    steps {
+      ... on Node {
+        id
+        internal {
+          type
+        }
+        ...FaqItemFragment
+      }
+    }
+  }
+`;
diff --git a/src/templates/modularPage.jsx b/src/templates/modularPage.jsx
index d560075e..3adc5c54 100644
--- a/src/templates/modularPage.jsx
+++ b/src/templates/modularPage.jsx
@@ -211,6 +211,7 @@ export const modularPageQuery = graphql`
           ...ResourceListModuleFragment
           ...LinkCollectionModuleFragment
           ...HelpSearchFragment
+          ...StepsModuleFragment
         }
       }
       includeContactForm

From a743d5157bdc2e6221342b8db4dfa8cff4e3d3a3 Mon Sep 17 00:00:00 2001
From: Toxicom <tomas.98.leo@gmail.com>
Date: Mon, 20 Mar 2023 14:27:56 +0200
Subject: [PATCH 15/15] #320 change homepage to prod

---
 src/constants/contentfulIds.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/constants/contentfulIds.js b/src/constants/contentfulIds.js
index 43952918..c30a7324 100644
--- a/src/constants/contentfulIds.js
+++ b/src/constants/contentfulIds.js
@@ -1,10 +1,10 @@
 const NAVIGATION_ID = `1yKThqiNevVEU4BCn7zZ9y`;
 
 // This is the PRODUCTION homepage
-// const HOMEPAGE_ID = `VoE6QU1LhN2Y5h6Tja3fq`;
+const HOMEPAGE_ID = `VoE6QU1LhN2Y5h6Tja3fq`;
 
 // This is the DUMMY homepage
-const HOMEPAGE_ID = `2hHrtVu5fUseOPMTxz82fV`;
+// const HOMEPAGE_ID = `2hHrtVu5fUseOPMTxz82fV`;
 
 const PROMOLINE_ID = `1zlccw24eib2cd3wTXRHfk`;