feat: add storybook story for paragraph

components/global/footer/Footer.tsx

@@ -5,7 +5,7 @@ import Icon from "../../shared/icon/Icon"
 
 export default function Footer() {
   return (
-    <footer className="mt-20 bg-background-overlay py-12">
+    <footer className="bg-background-overlay py-12">
       <div className="content-container">
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
           <div>

components/pages/basicPageLayout/BasicPageLayout.tsx

@@ -1,14 +1,13 @@
 import React from "react"
 
-import ParagraphVideo from "@/components/paragraphs/ParagraphGoVideo/ParagraphVideo"
 import ParagraphResolver from "@/components/paragraphs/ParagraphResolver"
-import { NodeGoPage, ParagraphUnion } from "@/lib/graphql/generated/dpl-cms/graphql"
+import { NodeGoPage } from "@/lib/graphql/generated/dpl-cms/graphql"
 
 function BasicPageLayout({ pageData }: { pageData: NodeGoPage }) {
   const { paragraphs } = pageData
 
   return (
-    <div className="gap-y-paragraph-spacing flex flex-col">
+    <div className="flex flex-col gap-y-paragraph-spacing">
       <ParagraphResolver paragraphs={paragraphs ?? []} />
     </div>
   )

components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { darkModeDecorator } from "@/.storybook/decorators"
+import ParagraphGoVideo from "@/components/paragraphs/paragraphGoVideo/ParagraphGoVideo"
+
+const meta = {
+  title: "components/ParagraphGoVideo",
+  component: ParagraphGoVideo,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    goVideoTitle: "Naja Marie Aidt - Oevelser i moerke",
+    src: "https://media.videotool.dk/?vn=557_2024111913325696587632242634",
+  },
+} satisfies Meta<typeof ParagraphGoVideo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    goVideoTitle: "Naja Marie Aidt - Oeveser i moerke",
+  },
+
+  render: args => <ParagraphGoVideo {...args}>ParagraphGoVideo</ParagraphGoVideo>,
+}
+
+export const DarkMode: Story = {
+  decorators: [darkModeDecorator],
+  render: args => <ParagraphGoVideo {...args}>ParagraphGoVideo</ParagraphGoVideo>,
+}

components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx

@@ -4,7 +4,12 @@ import React, { useEffect } from "react"
 
 import type { ParagraphGoVideo } from "@/lib/graphql/generated/dpl-cms/graphql"
 
-export default function ParagraphGoVideo(paragraphGoVideo: ParagraphGoVideo) {
+type ParagraphGoVideoProps = {
+  goVideoTitle: ParagraphGoVideo["goVideoTitle"]
+  src: string
+}
+
+export default function ParagraphGoVideo(paragraphGoVideo: ParagraphGoVideoProps) {
   const [mounted, setMounted] = React.useState(false)
 
   useEffect(() => {
@@ -20,23 +25,16 @@ export default function ParagraphGoVideo(paragraphGoVideo: ParagraphGoVideo) {
       </div>
 
       <div className="col-span-6 lg:col-span-12">
-        {mounted && (
-          <div className="relative aspect-16/9 w-full overflow-hidden rounded-base">
+        <div className="relative aspect-16/9 w-full overflow-hidden rounded-base">
+          {mounted && (
             <iframe
-              aria-label="Naja Marie Aidt - Oevelser i moerke"
+              aria-label={title || "Video"}
               className="absolute inset-0 h-full w-full"
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%!important",
-                height: "100%!important",
-              }}
               src="https://media.videotool.dk/?vn=557_2024111913325696587632242634"
               allowFullScreen
               allow="autoplay; fullscreen"></iframe>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     </div>
   )

components/paragraphs/ParagraphResolver.tsx

@@ -2,8 +2,8 @@ import React from "react"
 
 import { ParagraphUnion } from "@/lib/graphql/generated/dpl-cms/graphql"
 
-import ParagraphGoVideo from "./ParagraphGoVideo/ParagraphGoVideo"
 import { ParagraphErrorBoundary } from "./paragraphErrorBoundary/paragraphErrorBoundary"
+import ParagraphGoVideo from "./paragraphGoVideo/ParagraphGoVideo"
 
 function ParagraphResolver({ paragraphs }: { paragraphs: ParagraphUnion[] }) {
   const components = {
@@ -17,10 +17,12 @@ function ParagraphResolver({ paragraphs }: { paragraphs: ParagraphUnion[] }) {
     }
 
     const DynamicComponentType = components[type as keyof typeof components] || null
+    if (DynamicComponentType === null) return null
 
     return (
       <ParagraphErrorBoundary key={index}>
-        {DynamicComponentType ? <DynamicComponentType key={index} {...paragraph} /> : null}
+        {/* @ts-ignore TODO: figure out how to type dynamically imported components */}
+        <DynamicComponentType key={index} {...paragraph} />
       </ParagraphErrorBoundary>
     )
   })