Add Typography story

packages/go-ui-storybook/.storybook/ifrcGoTheme.js

@@ -3,7 +3,7 @@ import { create } from '@storybook/theming/create';
 export default create({
     base: 'light',
     brandTitle: 'IFRC-GO',
-    brandUrl: 'https://go.ifrc.org/',
+    brandUrl: '/',
     brandImage: '/go-logo.svg',
     brandTarget: 'IFRC_GO',
 });

packages/go-ui-storybook/src/stories/Introduction.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+import pkg from '@togglecorp/fujs/package.json';
+
+<Meta title="Introduction" />
+
+<h1 className="title">
+  IFRC Go UI
+</h1>
+
+<img src="/go-logo.svg" alt="IFRC Go logo" className="ifrc-logo" />
+
+<h3 className="overview">
+  Overview
+</h3>
+<div className="text-body">
+The IFRC Go UI library is a React-based component library developed by the International Federation of Red Cross and Red Crescent Societies (IFRC). This open-source library is designed for ease of use and customization, making it an invaluable resource for anyone in the IFRC network to create consistent and user-friendly web applications. Each component is designed to be consistent, customizable and performant.
+
+The design system aims to streamline the design and development process, providing guidance for both design and development tasks.
+</div>
+
+<br />
+<br />
+
+##  Links
+[Github repository](https://github.com/IFRCGo/go-web-app/tree/develop/packages/ui)
+
+[@ifrc-go/ui npm package](https://www.npmjs.com/package/@ifrc-go/ui)
+
+---
+Reach out to the Go team on [Github](https://github.com/IFRCGo/)

packages/go-ui-storybook/src/stories/Typography.mdx

@@ -0,0 +1,104 @@
+export const baseFontSize = 0.875;
+import { Meta, Typeset } from '@storybook/blocks';
+
+<Meta title="System/Typography" />
+
+export const typography = {
+  type: {
+    primary: "var(--go-ui-font-family-sans-serif)",
+    serif: "var(--go-ui-font-family-serif)",
+    mono: "var(--go-ui-font-family-mono)",
+  },
+  weight: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+  size: {
+    '2xs': 'var(--go-ui-font-size-2xs)',
+    xs: 'var(--go-ui-font-size-xs)',
+    sm: 'var(--go-ui-font-size-sm)',
+    md: 'var(--go-ui-font-size-md)',
+    lg: 'var(--go-ui-font-size-lg)',
+    xl: 'var(--go-ui-font-size-xl)',
+    '2xl': 'var(--go-ui-font-size-2xl)',
+    '3xl': 'var(--go-ui-font-size-3xl)',
+    '4xl': 'var(--go-ui-font-size-4xl)',
+  },
+};
+
+export const SampleText = 'Night; and once again, the while I wait for you, cold wind turns into rain.';
+
+# Typography
+
+**Font:** Poppins
+
+**Font Type:** Sans Serif
+
+**Weights:** 300(light), 400(regular), 500(medium), 600(semibold), 700(blold)
+
+<Typeset
+  fontSizes={[
+    typography.size['2xs'],
+    typography.size.xs,
+    typography.size.sm,
+    typography.size.md,
+    typography.size.lg,
+    typography.size.xl,
+    typography.size['2xl'],
+    typography.size['3xl'],
+    typography.size['4xl'],
+  ]}
+  fontWeight={typography.weight.md}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>
+
+**Font:** Georgia
+
+**Font Type:** Serif
+
+**Weights:** 300(light), 400(regular), 500(medium), 600(semibold), 700(blold)
+
+<Typeset
+  fontSizes={[
+    typography.size['2xs'],
+    typography.size.xs,
+    typography.size.sm,
+    typography.size.md,
+    typography.size.lg,
+    typography.size.xl,
+    typography.size['2xl'],
+    typography.size['3xl'],
+    typography.size['4xl'],
+  ]}
+  fontWeight={typography.weight.md}
+  sampleText={SampleText}
+  fontFamily={typography.type.serif}
+/>
+
+
+**Font:** SFMono-Regular
+
+**Font Type:** Monospace
+
+**Weights:** 300(light), 400(regular), 500(medium), 600(semibold), 700(blold)
+
+<Typeset
+  fontSizes={[
+    typography.size['2xs'],
+    typography.size.xs,
+    typography.size.sm,
+    typography.size.md,
+    typography.size.lg,
+    typography.size.xl,
+    typography.size['2xl'],
+    typography.size['3xl'],
+    typography.size['4xl'],
+  ]}
+  fontWeight={typography.weight.md}
+  sampleText={SampleText}
+  fontFamily={typography.type.mono}
+/>

packages/go-ui-storybook/src/stories/index.css

@@ -43,3 +43,26 @@
 .dropdown-option {
     margin-left: var(--go-ui-spacing-md);
 }
+
+.title > p {
+    font-size: var(--go-ui-font-size-4xl);
+    padding-bottom: var(--go-ui-spacing-2xl);
+    color: var(--go-ui-color-primary-red);
+}
+
+.ifrc-logo {
+    display: block;
+    margin: auto;
+    width: 50%;
+    padding-bottom: var(--go-ui-spacing-2xl);
+}
+
+.overview > p {
+    padding-top: var(--go-ui-spacing-md);
+    padding-bottom: var(--go-ui-spacing-md);
+    font-size: var(--go-ui-font-size-3xl);
+}
+
+.text-body > p {
+    font-size: var(--go-ui-font-size-lg);
+}