wip: component and storybook refinements

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;

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;

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;

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;

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;

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";

packages/design-system/src/ui/typography/Body.tsx → 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>;
 }

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>

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>;
+    }
+  }
 }

packages/design-system/src/ui/typography/Label.tsx → 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}

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> */
-}

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";