Merge pull request #36 from danskernesdigitalebibliotek/DDFBRA-177-ma…

…ke-a-story-for-all-fonts

feat: add Fonts component and Storybook stories for typography display and test

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],
+}

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