v2.2.0

src/components/common/Accordion/FaqAccordion.module.css

@@ -0,0 +1,4 @@
+.paragraph {
+  font-size: 20px;
+  font-weight: 500;
+}

src/components/common/Accordion/FaqAccordion.tsx

@@ -0,0 +1,171 @@
+import React, { useContext, useState } from "react";
+import { IconMinus, IconPlus } from "@tabler/icons";
+import { Accordion, Anchor, Text, Title } from "@mantine/core";
+import PageContext from "contexts/PageContext";
+import { renderRichText } from "gatsby-source-contentful/rich-text";
+import { Options } from "@contentful/rich-text-react-renderer";
+import { BLOCKS, INLINES } from "@contentful/rich-text-types";
+import { PATIENTS_PAGE } from "constants/page";
+import { getColorFromStylingOptions } from "utils/stylingOptions";
+
+import cx from "clsx";
+import * as classes from "./FaqAccordion.module.css";
+
+export const FaqAccordion = ({ resource }: any) => {
+  const { title } = useContext(PageContext);
+
+  const options: Options = {
+    renderNode: {
+      [BLOCKS.PARAGRAPH](node, children) {
+        return <Text className={cx(classes.paragraph)}>{children}</Text>;
+      },
+
+      [INLINES.HYPERLINK](node, children) {
+        const { uri } = node.data as { uri: string };
+
+        return (
+          <Anchor
+            href={uri}
+            target="_blank"
+            className={classes.anchor}
+            underline="never"
+            referrerPolicy="no-referrer"
+          >
+            {children}
+          </Anchor>
+        );
+      },
+
+      [BLOCKS.HEADING_3](node, children) {
+        return (
+          <Title data-context={title} order={3} lh={"normal"}>
+            {children}
+          </Title>
+        );
+      },
+    },
+  };
+
+
+  const AccordionContent = ({
+    referenceBackground,
+    referenceHeading,
+    referenceBody,
+  }: any) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <Accordion
+        variant="separated"
+        transitionDuration={0}
+        chevron={
+          isOpen ? (
+            <IconMinus size={24} style={{ color: "#000" }} />
+          ) : (
+            <IconPlus size={24} style={{ color: "#000" }} />
+          )
+        }
+        styles={{
+          item: {
+            background: getColorFromStylingOptions(referenceBackground),
+            border: "none",
+            padding: "0px",
+          },
+          control: {
+            padding: "0px 30px",
+            margin: "20px 0px 0px 0px",
+            fontSize: "22px",
+            background: "#f4f4f4",
+          },
+          label: {
+            fontWeight: 700,
+          },
+          content: {
+            color: "#525252",
+            margin: "0px 0px 20px 0px",
+          },
+        }}
+      >
+        <Accordion.Item
+          value={referenceHeading}
+          onClick={() => setIsOpen((prev) => !prev)}
+        >
+          <Accordion.Control>{referenceHeading}</Accordion.Control>
+          <Accordion.Panel>
+            {referenceBody && renderRichText(referenceBody, options)}
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    );
+  };
+
+  if (title === PATIENTS_PAGE) {
+    const referenceBody = resource.body.references[0].body;
+    return (
+      <Accordion
+        transitionDuration={0}
+        styles={{
+          content: {
+            background: "#f4f4f4",
+            marginBottom: "20px",
+            padding: "28px",
+            fontSize: "20px",
+            color: "#525252",
+          },
+          control: {
+            padding: "0px 30px 0px 0px",
+            fontSize: "24px",
+            backgroundColor: "transparent",
+          },
+          label: {
+            fontWeight: 700,
+          },
+        }}
+      >
+        <Accordion.Item value={resource.heading}>
+          <Accordion.Control>{resource.heading}</Accordion.Control>
+          <Accordion.Panel>
+            {referenceBody && renderRichText(referenceBody, options)}
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    );
+  }
+
+  return (
+    <Accordion
+      transitionDuration={0}
+      styles={{
+        content: {
+          marginBottom: "20px",
+          padding: "0px",
+        },
+        control: {
+          padding: "0px 30px 0px 0px",
+          fontSize: "28px",
+          backgroundColor: "transparent",
+        },
+        label: {
+          fontWeight: 700,
+        },
+      }}
+    >
+      <Accordion.Item value={resource.header}>
+        <Accordion.Control>{resource.header}</Accordion.Control>
+        <Accordion.Panel>
+          {resource.references.map((reference: any, index: any) => {
+            const referenceBody = reference.body.references[0]?.body;
+            return (
+              <AccordionContent
+                key={index}
+                referenceBackground={reference?.stylingOptions?.background}
+                referenceHeading={reference.heading}
+                referenceBody={referenceBody}
+              />
+            );
+          })}
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+};

src/components/common/Expanded/expanded.module.css

@@ -41,6 +41,23 @@
 		border-top: none;
 	}
 
+	&[data-is-faq-section='true'] {
+		box-sizing: content-box;
+
+		width: auto;
+
+		margin-left: 16px;
+		margin-right: 16px;
+		padding: 100px 0;
+
+		border-top: 2px solid var(--Phil-Rebrand-Neutral-Base, #e6e6e6);
+
+		@media (min-width: $phil-breakpoint-sm) {
+			margin-left: 100px;
+			margin-right: 100px;
+		}
+	}
+
 	@media (min-width: $phil-breakpoint-sm) {
 		padding: 100px;
 

src/components/section/ReferencedSection/ReferencedSection.tsx

@@ -146,6 +146,7 @@ const ReferencedSection: React.FC<ReferencedSectionProps> = ({
       fullWidth={section.referenceType === ReferenceTypeEnum["Image Carousel"]}
       data-context={context.title}
       data-is-newsletter-component={isNewsLetterComponent}
+      data-is-faq-section={isFaqSection}
       data-disable-border-top={!isPreviousBackgroundPure}
       pt={section.header?.length > 0 ? undefined : 0}
     >

src/components/section/ReferencedSection/ReferencedSectionTitle.tsx

@@ -7,7 +7,7 @@ import { ReferenceTypeEnum, type IReferencedSection } from "types/section";
 
 import * as classes from "./referencedSectionTitle.module.css";
 import PageContext from "contexts/PageContext";
-import { COMPANY_PAGE, PATIENTS_PAGE } from "constants/page";
+import { COMPANY_PAGE, HCP_PAGE, PATIENTS_PAGE } from "constants/page";
 
 type ReferencedSectionTitleProps = {
   section: IReferencedSection;
@@ -23,6 +23,7 @@ const ReferencedSectionTitle: React.FC<ReferencedSectionTitleProps> = ({
   const theme = useMantineTheme();
   const { title } = useContext(PageContext);
 
+
   const renderTitle = (
     text: string,
     order?: TitleOrder,
@@ -34,7 +35,7 @@ const ReferencedSectionTitle: React.FC<ReferencedSectionTitleProps> = ({
       order={order}
       c={title === COMPANY_PAGE ? textColor : undefined}
     >
-      {text}
+      {(title === PATIENTS_PAGE || title=== HCP_PAGE) && text === "FAQs" ? "Frequently Asked Questions" : text}
     </Title>
   );
 

src/components/section/ReferencedSection/RenderResource.tsx

@@ -27,6 +27,7 @@ import { CCard } from "components/common/CCard";
 import StepperCard from "components/common/Card/StepperCard/StepperCard";
 import { BrandOutcomeCard } from "components/brandOutcomeCard/BrandOutcomeCard";
 import Cell from "components/common/Cell/Cell";
+import { FaqAccordion } from "components/common/Accordion/FaqAccordion";
 
 // TODO: Deprecate after v2.0.0
 // Get colors for resources based on resource type
@@ -189,6 +190,10 @@ const BannerComponent: ComponentFunction = ({ resource }) => (
   <Banner resource={resource} />
 );
 
+const FaqAccordianComponent: ComponentFunction = ({resource}) => (
+  <FaqAccordion resource = {resource}/>
+);
+
 const getComponent = (
   referenceType: ReferenceTypeEnum | ResourceBlocksEnum,
   resource: TResource,
@@ -229,6 +234,7 @@ const getComponent = (
     [ReferenceTypeEnum["Stats Card"]]: StatsCardComponent,
     [ReferenceTypeEnum["Brand Outcome Card"]]: BrandOutcomeCardComponent,
     [ReferenceTypeEnum.Cell]: CellComponent,
+    [ReferenceTypeEnum["FAQ Accordion"]]: FaqAccordianComponent
   };
 
   const componentFunction = componentMappings[referenceType];

src/templates/executive-team.tsx

@@ -59,6 +59,7 @@ const ECard = ({ reference }: any) => {
         background: "#F5F6F8",
         display: "flex",
         flexDirection: "column",
+        width: "500px",
       }}
     >
       <Image src={media.media.file.url} alt={media.media.title} />