From 7eed3e05da5971d79b21d27571eef3c15e231d64 Mon Sep 17 00:00:00 2001
From: thomasgross <thomasgrossrasmussen@gmail.com>
Date: Fri, 8 Nov 2024 11:39:55 +0100
Subject: [PATCH] feat: add Fonts component and Storybook stories for
 typography display and test

---
 components/shared/fonts/Fonts.stories.tsx | 25 ++++++++++++++++++++
 components/shared/fonts/Fonts.tsx         | 28 +++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 components/shared/fonts/Fonts.stories.tsx
 create mode 100644 components/shared/fonts/Fonts.tsx

diff --git a/components/shared/fonts/Fonts.stories.tsx b/components/shared/fonts/Fonts.stories.tsx
new file mode 100644
index 00000000..0a52f43b
--- /dev/null
+++ b/components/shared/fonts/Fonts.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { darkModeDecorator } from "@/.storybook/decorators"
+
+import Fonts from "./Fonts"
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "components/Fonts",
+  component: Fonts,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Fonts>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {}
+
+export const FontsDarkMode: Story = {
+  decorators: [darkModeDecorator],
+}
diff --git a/components/shared/fonts/Fonts.tsx b/components/shared/fonts/Fonts.tsx
new file mode 100644
index 00000000..6d590363
--- /dev/null
+++ b/components/shared/fonts/Fonts.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const Fonts = () => {
+  return (
+    <div className="space-y-10">
+      <h1 className="text-typo-huge">text-typo-huge</h1>
+      <h1 className="text-typo-heading-1">text-typo-heading-1</h1>
+      <h2 className="text-typo-heading-2">text-typo-heading-2</h2>
+      <h3 className="text-typo-heading-3">text-typo-heading-3</h3>
+      <h4 className="text-typo-heading-4">text-typo-heading-4</h4>
+      <h5 className="text-typo-heading-5">text-typo-heading-5</h5>
+      <p className="text-typo-subtitle-lg">text-typo-subtitle-lg</p>
+      <p className="text-typo-subtitle-md">text-typo-subtitle-md</p>
+      <p className="text-typo-subtitle-sm">text-typo-subtitle-sm</p>
+      <p className="text-typo-body-lg">text-typo-body-lg</p>
+      <p className="text-typo-body-md">text-typo-body-md</p>
+      <p className="text-typo-body-sm">text-typo-body-sm</p>
+      <p className="text-typo-button-lg">text-typo-button-lg</p>
+      <p className="text-typo-button-sm">text-typo-button-sm</p>
+      <p className="text-typo-link">text-typo-link</p>
+      <p className="text-typo-tag-lg">text-typo-tag-lg</p>
+      <p className="text-typo-tag-sm">text-typo-tag-sm</p>
+      <p className="text-typo-caption">text-typo-caption</p>
+    </div>
+  )
+}
+
+export default Fonts