#320 Implement personalized guides

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 (
     <>

src/components/Button/Button.css

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

src/components/ContentfulModule/ChipModule/ChipModule.jsx

@@ -23,5 +23,6 @@ export const query = graphql`
     chips {
       ...ChipFragment
     }
+    fullWidth
   }
 `;

src/components/ContentfulModule/ContentfulModule.jsx

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

src/components/ContentfulModule/ContentfulModulePropTypes.js

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

src/components/ContentfulModule/EventsModule/EventsModule.jsx

@@ -1,12 +1,16 @@
 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";
 import { graphql } from "gatsby";
 
-const EventsModule = ({ events, locale }) => {
+const EventsModule = ({ events, locale, fullWidth }) => {
   const currentDate = new Date();
   const upcomingEvents = [];
   const previousEvents = [];
@@ -36,38 +40,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>
   );
 };
 
@@ -80,5 +86,6 @@ export const query = graphql`
     events {
       ...EventItemFragment
     }
+    fullWidth
   }
 `;

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 };

src/components/ContentfulModule/FaqCategoriesModule/FaqCategoriesModule.jsx

@@ -1,20 +1,34 @@
 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 { graphql } from "gatsby";
 
-const FaqCategoriesModule = ({ heading, seeAllLink, categories, pathname }) => {
+import "./FaqCategoriesModule.css";
+import {
+  FaqCategoriesModuleDefaultProps,
+  FaqCategoriesModulePropTypes,
+} from "./FaqCategoriesModulePropTypes";
+
+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}
@@ -37,6 +51,8 @@ const FaqCategoriesModule = ({ heading, seeAllLink, categories, pathname }) => {
 
 FaqCategoriesModule.propTypes = FaqCategoriesModulePropTypes;
 
+FaqCategoriesModule.defaultProps = FaqCategoriesModuleDefaultProps;
+
 export default FaqCategoriesModule;
 
 export const query = graphql`
@@ -49,5 +65,6 @@ export const query = graphql`
       pageHeading
       iconType
     }
+    fullWidth
   }
 `;

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 };

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,
+};

src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModule.jsx

@@ -1,60 +1,31 @@
 import React from "react";
+import { graphql } from "gatsby";
 
-import { LinkCollectionModulePropTypes } from "./LinkCollectionModulePropTypes";
-import Button from "../../Button";
-import Constraint from "../../Constraint";
-import LinkCollectionWithImage from "../../LinkCollectionWithImage";
-import Section from "../../Section";
+import {
+  LinkCollectionModuleDefaultProps,
+  LinkCollectionModulePropTypes,
+} from "./LinkCollectionModulePropTypes";
+import LcmWithImage from "./variants/LcmWithImage";
+import LcmDefault from "./variants/LcmDefault";
+import LcmLightBlocks from "./variants/LcmLightBlocks";
 
-import "./LinkCollectionModule.css";
-import { graphql } from "gatsby";
+const LinkCollectionModule = (props) => {
+  const { variant } = props;
+
+  if (variant === `with-image`) {
+    return <LcmWithImage {...props} />;
+  }
 
-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>
-    );
+  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;
 
@@ -69,6 +40,8 @@ export const query = graphql`
         placeholder: BLURRED
       )
     }
+    fullWidth
+    variant
     links {
       ...LinkFragment
     }

src/components/ContentfulModule/LinkCollectionModule/LinkCollectionModulePropTypes.js

@@ -1,14 +1,24 @@
 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,
       label: PropTypes.string.isRequired,
       url: PropTypes.string.isRequired,
     })
   ).isRequired,
+  fullWidth: PropTypes.bool,
 };
 
-export { LinkCollectionModulePropTypes };
+const LinkCollectionModuleDefaultProps = {
+  heading: ``,
+  subheading: ``,
+  variant: `default`,
+  fullWidth: false,
+};
+
+export { LinkCollectionModulePropTypes, LinkCollectionModuleDefaultProps };

src/components/ContentfulModule/LinkCollectionModule/index.js

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