From bee51eb9c2b8539986eaaba9a00c7147fb6e4d39 Mon Sep 17 00:00:00 2001
From: mewdev <michal.wierzgon@gmail.com>
Date: Sat, 4 Jan 2025 14:57:56 +0100
Subject: [PATCH] wip: component and storybook refinements

---
 .../stories/bodyText.stories.tsx              | 39 +++++++++++++++++
 .../stories/buttonText.stories.tsx            | 31 ++++++++++++++
 .../stories/headline.stories.tsx              | 42 +++++++++++++++++++
 .../stories/labelText.stories.tsx             | 18 ++++++++
 apps/design-system/stories/title.stories.tsx  | 32 ++++++++++++++
 packages/design-system/src/ui/index.ts        |  3 +-
 .../ui/typography/{Body.tsx => BodyText.tsx}  |  4 +-
 .../src/ui/typography/ButtonText.tsx          | 12 +-----
 .../src/ui/typography/Headline.tsx            | 32 +++++++-------
 .../typography/{Label.tsx => LabelText.tsx}   |  2 +-
 .../design-system/src/ui/typography/Title.tsx | 28 ++++---------
 .../design-system/src/ui/typography/index.ts  |  4 +-
 12 files changed, 194 insertions(+), 53 deletions(-)
 create mode 100644 apps/design-system/stories/bodyText.stories.tsx
 create mode 100644 apps/design-system/stories/buttonText.stories.tsx
 create mode 100644 apps/design-system/stories/headline.stories.tsx
 create mode 100644 apps/design-system/stories/labelText.stories.tsx
 create mode 100644 apps/design-system/stories/title.stories.tsx
 rename packages/design-system/src/ui/typography/{Body.tsx => BodyText.tsx} (74%)
 rename packages/design-system/src/ui/typography/{Label.tsx => LabelText.tsx} (78%)

diff --git a/apps/design-system/stories/bodyText.stories.tsx b/apps/design-system/stories/bodyText.stories.tsx
new file mode 100644
index 0000000..e916c1b
--- /dev/null
+++ b/apps/design-system/stories/bodyText.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { BodyText } from "@repo/design-system/ui";
+
+const meta: Meta<typeof BodyText> = {
+  title: "Typography/Body",
+  component: BodyText,
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["small", "medium", "large"],
+    },
+  },
+};
+
+type BodyTextStory = StoryObj<typeof meta>;
+
+export const Large: BodyTextStory = {
+  args: {
+    children: "Large quick brown fox jumps over the lazy dog",
+    variant: "large",
+  },
+};
+
+export const Medium: BodyTextStory = {
+  args: {
+    children: "Medium quick brown fox jumps over the lazy dog",
+    variant: "medium",
+  },
+};
+
+export const Small: BodyTextStory = {
+  args: {
+    children: "Small quick brown fox jumps over the lazy dog",
+    variant: "small",
+  },
+};
+
+export default meta;
diff --git a/apps/design-system/stories/buttonText.stories.tsx b/apps/design-system/stories/buttonText.stories.tsx
new file mode 100644
index 0000000..359dc04
--- /dev/null
+++ b/apps/design-system/stories/buttonText.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ButtonText } from "@repo/design-system/ui";
+
+const meta: Meta<typeof ButtonText> = {
+  title: "Typography/Button",
+  component: ButtonText,
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["extraSmall", "small"],
+    },
+  },
+};
+
+type ButtonTextStory = StoryObj<typeof meta>;
+
+export const Small: ButtonTextStory = {
+  args: {
+    children: "Button text",
+    variant: "small",
+  },
+};
+
+export const ExtraSmall: ButtonTextStory = {
+  args: {
+    children: "Button text",
+    variant: "extraSmall",
+  },
+};
+export default meta;
diff --git a/apps/design-system/stories/headline.stories.tsx b/apps/design-system/stories/headline.stories.tsx
new file mode 100644
index 0000000..4c4257e
--- /dev/null
+++ b/apps/design-system/stories/headline.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Headline } from "@repo/design-system/ui";
+
+const meta: Meta<typeof Headline> = {
+  title: "Typography/Headline",
+  component: Headline,
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["small", "medium", "large"],
+    },
+  },
+};
+
+type HeadlineStory = StoryObj<typeof meta>;
+
+export const Large: HeadlineStory = {
+  args: {
+    children: "Headline large",
+    variant: "large",
+    type: "h1",
+  },
+};
+
+export const Medium: HeadlineStory = {
+  args: {
+    children: "Headline medium",
+    variant: "medium",
+    type: "h2",
+  },
+};
+
+export const Small: HeadlineStory = {
+  args: {
+    children: "Headline small",
+    variant: "small",
+    type: "h3",
+  },
+};
+
+export default meta;
diff --git a/apps/design-system/stories/labelText.stories.tsx b/apps/design-system/stories/labelText.stories.tsx
new file mode 100644
index 0000000..8528c20
--- /dev/null
+++ b/apps/design-system/stories/labelText.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LabelText } from "@repo/design-system/ui";
+
+const meta: Meta<typeof LabelText> = {
+  title: "Typography/Label",
+  component: LabelText,
+};
+
+type LabelTextStory = StoryObj<typeof meta>;
+
+export const Default: LabelTextStory = {
+  args: {
+    children: "Label text (inter).",
+  },
+};
+
+export default meta;
diff --git a/apps/design-system/stories/title.stories.tsx b/apps/design-system/stories/title.stories.tsx
new file mode 100644
index 0000000..f01ff06
--- /dev/null
+++ b/apps/design-system/stories/title.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Title } from "@repo/design-system/ui";
+
+const meta: Meta<typeof Title> = {
+  title: "Typography/Title",
+  component: Title,
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["medium", "large"],
+    },
+  },
+};
+
+type TitleStory = StoryObj<typeof meta>;
+
+export const Large: TitleStory = {
+  args: {
+    children: "Title large",
+    variant: "large",
+  },
+};
+
+export const Medium: TitleStory = {
+  args: {
+    children: "Title medium",
+    variant: "medium",
+  },
+};
+
+export default meta;
diff --git a/packages/design-system/src/ui/index.ts b/packages/design-system/src/ui/index.ts
index c0f6add..30f538c 100644
--- a/packages/design-system/src/ui/index.ts
+++ b/packages/design-system/src/ui/index.ts
@@ -3,4 +3,5 @@ export * from "./button/index";
 export * from "./card/index";
 export * from "./progress/index";
 export * from "./question/index";
-export * from "./blobs";
+export * from "./blobs/index";
+export * from "./typography/index";
diff --git a/packages/design-system/src/ui/typography/Body.tsx b/packages/design-system/src/ui/typography/BodyText.tsx
similarity index 74%
rename from packages/design-system/src/ui/typography/Body.tsx
rename to packages/design-system/src/ui/typography/BodyText.tsx
index 6093e86..4026d14 100644
--- a/packages/design-system/src/ui/typography/Body.tsx
+++ b/packages/design-system/src/ui/typography/BodyText.tsx
@@ -1,6 +1,6 @@
 import { cva, VariantProps } from "class-variance-authority";
 
-const BodyVariants = cva("k1-font-primary, k1-font-bold, k1-tracking-tighter", {
+const BodyVariants = cva("k1-font-primary k1-tracking-tighter", {
   variants: {
     variant: {
       large: "k1-text-xl k1-tracking-tight",
@@ -15,6 +15,6 @@ type Props = {
   children: React.ReactNode;
 } & VariantProps<typeof BodyVariants>;
 
-export default function Body({ children, variant }: Props) {
+export function BodyText({ children, variant }: Props) {
   return <p className={BodyVariants({ variant })}>{children}</p>;
 }
diff --git a/packages/design-system/src/ui/typography/ButtonText.tsx b/packages/design-system/src/ui/typography/ButtonText.tsx
index 3c0965e..e7efa34 100644
--- a/packages/design-system/src/ui/typography/ButtonText.tsx
+++ b/packages/design-system/src/ui/typography/ButtonText.tsx
@@ -1,7 +1,7 @@
 import { cva, VariantProps } from "class-variance-authority";
 
 const ButtonTextVariants = cva(
-  "k1-font-secondary, k1-font-bold, k1-uppercase k1-tracking-wider",
+  "k1-font-secondary k1-font-bold k1-uppercase k1-tracking-wider",
   {
     variants: {
       variant: {
@@ -16,14 +16,6 @@ type Props = {
   children: React.ReactNode;
 } & VariantProps<typeof ButtonTextVariants>;
 
-export default function ButtonText({ children, variant }: Props) {
+export function ButtonText({ children, variant }: Props) {
   return <span className={ButtonTextVariants({ variant })}>{children}</span>;
 }
-
-// <span className="k1-font-secondary k1-text-sm k1-font-bold k1-uppercase k1-tracking-wider">
-// Button text
-// </span>
-
-// <span className="k1-font-secondary k1-text-xs k1-font-bold k1-uppercase k1-tracking-wider">
-// Small button text (radio canada).
-// </span>
diff --git a/packages/design-system/src/ui/typography/Headline.tsx b/packages/design-system/src/ui/typography/Headline.tsx
index 04b5ac4..8428c3a 100644
--- a/packages/design-system/src/ui/typography/Headline.tsx
+++ b/packages/design-system/src/ui/typography/Headline.tsx
@@ -1,7 +1,7 @@
 import { cva, VariantProps } from "class-variance-authority";
 
 const HeadlineVariants = cva(
-  "k1-font-secondary, k1-font-bold, k1-tracking-tighter",
+  "k1-font-secondary k1-font-bold k1-tracking-tighter",
   {
     variants: {
       variant: {
@@ -13,24 +13,24 @@ const HeadlineVariants = cva(
   },
 );
 
+type HeadingType = "h1" | "h2" | "h3";
+
 type Props = {
   children: React.ReactNode;
+  type: HeadingType;
 } & VariantProps<typeof HeadlineVariants>;
 
-// TODO: solve h1,h2,h3 problem
-
-export default function Headline({ children, variant }: Props) {
-  return <h1 className={HeadlineVariants({ variant })}>{children}</h1>;
-}
+export function Headline({ children, variant, type }: Props) {
+  switch (type) {
+    case "h1": {
+      return <h1 className={HeadlineVariants({ variant })}>{children}</h1>;
+    }
+    case "h2": {
+      return <h2 className={HeadlineVariants({ variant })}>{children}</h2>;
+    }
 
-{
-  /* <h1 className="k1-font-secondary k1-text-6xl k1-font-bold k1-tracking-tighter">
-Headline large
-</h1>
-<h2 className="k1-font-secondary k1-text-5xl k1-font-bold k1-tracking-tighter">
-Headline medium
-</h2>
-<h3 className="k1-font-secondary k1-text-4xl k1-font-bold k1-tracking-tighter">
-Headline small
-</h3> */
+    case "h3": {
+      return <h3 className={HeadlineVariants({ variant })}>{children}</h3>;
+    }
+  }
 }
diff --git a/packages/design-system/src/ui/typography/Label.tsx b/packages/design-system/src/ui/typography/LabelText.tsx
similarity index 78%
rename from packages/design-system/src/ui/typography/Label.tsx
rename to packages/design-system/src/ui/typography/LabelText.tsx
index aefb879..ba512f6 100644
--- a/packages/design-system/src/ui/typography/Label.tsx
+++ b/packages/design-system/src/ui/typography/LabelText.tsx
@@ -2,7 +2,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-export default function Label({ children }: Props) {
+export function LabelText({ children }: Props) {
   return (
     <span className="k1-font-primary k1-text-xs k1-font-bold k1-uppercase k1-tracking-wider">
       {children}
diff --git a/packages/design-system/src/ui/typography/Title.tsx b/packages/design-system/src/ui/typography/Title.tsx
index b8a7e21..2d420e5 100644
--- a/packages/design-system/src/ui/typography/Title.tsx
+++ b/packages/design-system/src/ui/typography/Title.tsx
@@ -1,32 +1,18 @@
 import { cva, VariantProps } from "class-variance-authority";
 
-const TitleVariants = cva(
-  "k1-font-secondary, k1-font-bold, k1-tracking-tight",
-  {
-    variants: {
-      variant: {
-        large: "k1-text-3xl",
-        medium: "k1-text-2xl",
-      },
+const TitleVariants = cva("k1-font-secondary k1-font-bold k1-tracking-tight", {
+  variants: {
+    variant: {
+      large: "k1-text-3xl",
+      medium: "k1-text-2xl",
     },
   },
-);
+});
 
 type Props = {
   children: React.ReactNode;
 } & VariantProps<typeof TitleVariants>;
 
-// solve h1,h2,h3 problem ?
-
-export default function Title({ children, variant }: Props) {
+export function Title({ children, variant }: Props) {
   return <span className={TitleVariants({ variant })}>{children}</span>;
 }
-
-{
-  /* <h1 className="k1-font-secondary k1-text-3xl k1-font-bold k1-tracking-tight">
-Title large
-</h1>
-<h1 className="k1-font-secondary k1-text-2xl k1-font-bold k1-tracking-tight">
-Title medium
-</h1> */
-}
diff --git a/packages/design-system/src/ui/typography/index.ts b/packages/design-system/src/ui/typography/index.ts
index 6377b44..4928e3e 100644
--- a/packages/design-system/src/ui/typography/index.ts
+++ b/packages/design-system/src/ui/typography/index.ts
@@ -1,5 +1,5 @@
-export * from "./Body";
+export * from "./BodyText";
 export * from "./ButtonText";
 export * from "./Headline";
-export * from "./Label";
+export * from "./LabelText";
 export * from "./Title";