From cd21c326ec9b7977a09cdc20133a12cbd9491df1 Mon Sep 17 00:00:00 2001
From: Adriel Tosi <adriel.tosi@netcentric.biz>
Date: Wed, 31 Jan 2024 16:58:13 +0100
Subject: [PATCH 1/2] Create Typography component

---
 .../src/components/Header/Header.stories.ts   |  3 +-
 .../components/Typography/Heading.stories.ts  | 46 +++++++++++++++++
 .../src/components/Typography/Text.stories.ts | 22 ++++++++
 .../src/components/Typography/Typography.tsx  | 51 +++++++++++++++++++
 4 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/components/Typography/Heading.stories.ts
 create mode 100644 apps/frontend/src/components/Typography/Text.stories.ts
 create mode 100644 apps/frontend/src/components/Typography/Typography.tsx

diff --git a/apps/frontend/src/components/Header/Header.stories.ts b/apps/frontend/src/components/Header/Header.stories.ts
index bc73fa3..8f27c4e 100644
--- a/apps/frontend/src/components/Header/Header.stories.ts
+++ b/apps/frontend/src/components/Header/Header.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Header } from './Header';
 
 const meta = {
-  title: 'Example/Header',
+  title: 'Header',
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
@@ -16,5 +16,4 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-
 export const DefaultHeader: Story = {};
diff --git a/apps/frontend/src/components/Typography/Heading.stories.ts b/apps/frontend/src/components/Typography/Heading.stories.ts
new file mode 100644
index 0000000..dc39e89
--- /dev/null
+++ b/apps/frontend/src/components/Typography/Heading.stories.ts
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Heading } from './Typography';
+
+const meta = {
+  title: 'Heading',
+  component: Heading,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const H1: Story = {
+  args: {
+    level: 'h1',
+    children: 'Heading h1',
+  },
+};
+export const H2: Story = {
+  args: {
+    level: 'h2',
+    children: 'Heading h2',
+  },
+};
+export const H3: Story = {
+  args: {
+    level: 'h3',
+    children: 'Heading h3',
+  },
+};
+export const H4: Story = {
+  args: {
+    level: 'h4',
+    children: 'Heading h4',
+  },
+};
+export const H5: Story = {
+  args: {
+    level: 'h5',
+    children: 'Heading h5',
+  },
+};
diff --git a/apps/frontend/src/components/Typography/Text.stories.ts b/apps/frontend/src/components/Typography/Text.stories.ts
new file mode 100644
index 0000000..47458fa
--- /dev/null
+++ b/apps/frontend/src/components/Typography/Text.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Text } from './Typography';
+
+const meta = {
+  title: 'Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Paragraphs: Story = {
+  args: {
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dapibus vehicula tincidunt. Mauris vel dui purus. Vestibulum ultricies egestas scelerisque. Proin venenatis consequat pellentesque. Nunc porttitor vestibulum velit. Nunc nec eros sit amet nibh luctus mattis. Nulla facilisi. Aenean euismod purus mi, et tincidunt velit auctor vitae',
+  },
+};
diff --git a/apps/frontend/src/components/Typography/Typography.tsx b/apps/frontend/src/components/Typography/Typography.tsx
new file mode 100644
index 0000000..2e33221
--- /dev/null
+++ b/apps/frontend/src/components/Typography/Typography.tsx
@@ -0,0 +1,51 @@
+import clsx from 'clsx';
+
+export interface HeadingProps {
+  level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+  children: React.ReactNode;
+}
+const common = 'font-gellix';
+const h1 = 'text-6xl font-semibold leading-[4.25rem]';
+const h2 = 'text-5xl font-semibold leading-[3.5rem]';
+const h3 = 'text-4xl font-semibold leading-[2.75rem]';
+const h4 = 'text-3xl font-light';
+const h5 = 'text-2xl';
+
+export const Heading = ({ level, children }: HeadingProps) => {
+  const Tag = level;
+
+  return (
+    <Tag
+      className={clsx(common, {
+        [h1]: level === 'h1',
+        [h2]: level === 'h2',
+        [h3]: level === 'h3',
+        [h4]: level === 'h4',
+        [h5]: level === 'h5',
+      })}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+export interface TextProps {
+  size?: 'default' | 'small' | 'tiny';
+  weight?: 'regular' | 'bold';
+  children: React.ReactNode;
+}
+
+export const Text = ({ size = 'default', weight = 'regular', children }: TextProps) => {
+  return (
+    <p
+      className={clsx(common, {
+        'font-semibold': weight === 'bold',
+        'text-[1.25rem] leading-6': size === 'default',
+        'text-sm leading-5': size === 'small',
+        'text-xs leading-4': size === 'tiny',
+      })}
+    >
+      {children}
+    </p>
+  );
+};

From 909d27ffe540468989d55ff19ea20cd368c32b27 Mon Sep 17 00:00:00 2001
From: Adriel Tosi <adriel.tosi@netcentric.biz>
Date: Thu, 1 Feb 2024 09:17:41 +0100
Subject: [PATCH 2/2] Use only tailwind font size

---
 apps/frontend/src/components/Typography/Typography.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/Typography/Typography.tsx b/apps/frontend/src/components/Typography/Typography.tsx
index 2e33221..12e5ce0 100644
--- a/apps/frontend/src/components/Typography/Typography.tsx
+++ b/apps/frontend/src/components/Typography/Typography.tsx
@@ -40,7 +40,7 @@ export const Text = ({ size = 'default', weight = 'regular', children }: TextPro
     <p
       className={clsx(common, {
         'font-semibold': weight === 'bold',
-        'text-[1.25rem] leading-6': size === 'default',
+        'text-xl leading-6': size === 'default',
         'text-sm leading-5': size === 'small',
         'text-xs leading-4': size === 'tiny',
       })}