From 6031a57574f2a3c701131c47b4d6d992d931a759 Mon Sep 17 00:00:00 2001
From: thomasgross <thomasgrossrasmussen@gmail.com>
Date: Fri, 27 Dec 2024 17:16:44 +0100
Subject: [PATCH] feat: add storybook story for paragraph

---
 components/global/footer/Footer.tsx           |  2 +-
 .../pages/basicPageLayout/BasicPageLayout.tsx |  5 ++-
 .../ParagraphGoVideo.stories.tsx              | 32 +++++++++++++++++++
 .../ParagraphGoVideo/ParagraphGoVideo.tsx     | 24 +++++++-------
 components/paragraphs/ParagraphResolver.tsx   |  6 ++--
 5 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.stories.tsx

diff --git a/components/global/footer/Footer.tsx b/components/global/footer/Footer.tsx
index 13ede9b1..56ba81c1 100644
--- a/components/global/footer/Footer.tsx
+++ b/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>
diff --git a/components/pages/basicPageLayout/BasicPageLayout.tsx b/components/pages/basicPageLayout/BasicPageLayout.tsx
index d3e039f9..68b3d425 100644
--- a/components/pages/basicPageLayout/BasicPageLayout.tsx
+++ b/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>
   )
diff --git a/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.stories.tsx b/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.stories.tsx
new file mode 100644
index 00000000..7410bb7e
--- /dev/null
+++ b/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>,
+}
diff --git a/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx b/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx
index a61ffe28..1937b7b7 100644
--- a/components/paragraphs/ParagraphGoVideo/ParagraphGoVideo.tsx
+++ b/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>
   )
diff --git a/components/paragraphs/ParagraphResolver.tsx b/components/paragraphs/ParagraphResolver.tsx
index 9c77026b..679cbff8 100644
--- a/components/paragraphs/ParagraphResolver.tsx
+++ b/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>
     )
   })