Merge branch 'main' into test/header-footer

apps/nextjs/src/app/faqs/index.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FAQPageContent } from ".";
+
+const meta: Meta<typeof FAQPageContent> = {
+  title: "Pages/FAQs",
+  component: FAQPageContent,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof FAQPageContent>;
+
+export const Default: Story = {
+  args: {},
+};

apps/nextjs/src/app/faqs/index.tsx

@@ -17,7 +17,7 @@ import GetInTouchBox from "@/components/AppComponents/GetInTouchBox";
 import Layout from "@/components/Layout";
 import { OakBoxCustomMaxWidth } from "@/components/OakBoxCustomMaxWidth";
 
-const FAQPage = () => {
+export const FAQPageContent = () => {
   const startingRef = useRef(null);
   const featuresRef = useRef(null);
   const supportRef = useRef(null);
@@ -36,7 +36,7 @@ const FAQPage = () => {
     }
   };
   return (
-    <Layout>
+    <>
       <OakMaxWidth>
         <OakFlex $justifyContent="space-between">
           <OakBox $display={["none", "block"]}>
@@ -849,8 +849,14 @@ const FAQPage = () => {
           </OakBoxCustomMaxWidth>
         </OakFlex>
       </OakMaxWidth>
-    </Layout>
+    </>
   );
 };
 
-export default FAQPage;
+export default function FAQPage() {
+  return (
+    <Layout>
+      <FAQPageContent />
+    </Layout>
+  );
+}

apps/nextjs/src/app/home-page.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { HomePageContent } from "./home-page";
+
+const meta: Meta<typeof HomePageContent> = {
+  title: "Pages/Homepage",
+  component: HomePageContent,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof HomePageContent>;
+
+export const Default: Story = {
+  args: {
+    // NOTE: We're not including mux video links right now
+    pageData: null,
+  },
+};

apps/nextjs/src/app/home-page.tsx

@@ -55,17 +55,25 @@ const OakFlexCustomMaxWidthWithHalfWidth = styled(OakFlexCustomMaxWidth)`
   }
 `;
 
-export default function HomePage({
-  pageData,
-}: {
+type HomePageProps = {
   pageData: HomePageQueryResult | null;
-}) {
+};
+
+export default function HomePage(props: HomePageProps) {
+  return (
+    <Layout>
+      <HomePageContent {...props} />
+    </Layout>
+  );
+}
+
+export function HomePageContent({ pageData }: HomePageProps) {
   const user = useUser();
 
   const { track } = useAnalytics();
 
   return (
-    <Layout>
+    <>
       <HeroContainer>
         <OakFlex
           $flexDirection={["column", "row"]}
@@ -334,7 +342,7 @@ export default function HomePage({
           as possible.
         </OakP>
       </OakFlexWithBackground>
-    </Layout>
+    </>
   );
 }