feat: migrate typography

components/typography/Heading.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+export interface HeadingProps {
+  typeStyle?: HeadingTypeStyle;
+  level?: HeadingLevel;
+  textColor?: string;
+  className?: string;
+  children?: React.ReactNode;
+  id?: string;
+}
+
+/**
+ * Heading
+ * @param {HeadingTypeStyle} props.typeStyle contains the type of heading style. HeadingTypeStyle.lg is default
+ * @param {HeadingLevel} props.level contains the level of heading. HeadingLevel.h2 is by default
+ * @param {string} props.textColor contains text color for the heading. 'text-primary-800' is by default
+ * @param {string} props.className contains additional classes that should be added to the component
+ * @param {React.ReactNode} props.children contains all the child elements bounded inside component
+ * @param {string} props.id contains an id to be appended on heading
+ */
+export default function Heading({
+  typeStyle = HeadingTypeStyle.lg,
+  level = HeadingLevel.h2,
+  textColor = 'text-primary-800',
+  className = '',
+  children,
+  id
+}: HeadingProps) {
+  const Tag = level ?? HeadingLevel.h2;
+
+  let classNames = '';
+
+  switch (typeStyle) {
+    case HeadingTypeStyle.xl:
+      classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-xl ${className || ''}`;
+      break;
+    case HeadingTypeStyle.lg:
+      classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-lg ${className || ''}`;
+      break;
+    case HeadingTypeStyle.md:
+      classNames = `font-heading text-heading-md font-bold tracking-heading ${className || ''}`;
+      break;
+    case HeadingTypeStyle.mdSemibold:
+      classNames = `font-heading text-heading-md font-semibold tracking-heading ${className || ''}`;
+      break;
+    case HeadingTypeStyle.sm:
+      classNames = `font-heading text-heading-sm font-bold tracking-heading ${className || ''}`;
+      break;
+    case HeadingTypeStyle.smSemibold:
+      classNames = `font-heading text-heading-sm font-semibold tracking-heading ${className || ''}`;
+      break;
+    case HeadingTypeStyle.xs:
+      classNames = `font-heading text-heading-xs font-bold tracking-heading ${className || ''}`;
+      break;
+    case HeadingTypeStyle.xsSemibold:
+      classNames = `font-heading text-heading-xs font-semibold tracking-heading ${className || ''}`;
+      break;
+    case HeadingTypeStyle.bodyLg:
+      classNames = `font-heading text-body-lg tracking-body font-regular ${className || ''}`;
+      break;
+    case HeadingTypeStyle.bodyMd:
+      classNames = `font-heading text-body-md tracking-body font-regular ${className || ''}`;
+      break;
+    case HeadingTypeStyle.bodySm:
+      classNames = `font-heading text-body-sm tracking-body font-regular ${className || ''}`;
+      break;
+    default:
+      classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-xl ${className || ''}`;
+  }
+
+  return (
+    <Tag id={id} className={twMerge(textColor, classNames)}>
+      {children}
+    </Tag>
+  );
+}

components/typography/Paragraph.tsx

@@ -0,0 +1,49 @@
+import { twMerge } from 'tailwind-merge';
+
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+export interface ParagraphProps {
+  typeStyle?: ParagraphTypeStyle;
+  textColor?: string;
+  fontWeight?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * Paragraph
+ * @param {ParagraphTypeStyle} props.typeStyle contains the type of paragraph style. ParagraphTypeStyle.lg is by default
+ * @param {string} props.textColor contains text color for the paragraph. 'text-gray-700' is by default
+ * @param {string} props.fontWeight contains class name for applying font weight in the paragraph
+ * @param {string} props.className contains additional classes that should be added to the component
+ * @param {React.ReactNode} props.children contains all the child elements bounded inside component
+ */
+export default function Paragraph({
+  typeStyle = ParagraphTypeStyle.lg,
+  textColor = 'text-gray-700',
+  fontWeight = '',
+  className = '',
+  children
+}: ParagraphProps) {
+  let classNames = '';
+
+  switch (typeStyle) {
+    case ParagraphTypeStyle.lg:
+      classNames = `text-lg ${fontWeight || ''} ${className || ''}`;
+      break;
+    case ParagraphTypeStyle.md:
+      classNames = `text-md ${fontWeight || ''} ${className || ''}`;
+      break;
+    case ParagraphTypeStyle.sm:
+      classNames = `text-sm ${fontWeight || ''} ${className || ''}`;
+      break;
+    default:
+      classNames = `text-lg font-regular ${className || ''}`;
+  }
+
+  return (
+    <p data-testid='Paragraph-test' className={twMerge(textColor, classNames)}>
+      {children}
+    </p>
+  );
+}

components/typography/TextLink.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+
+export interface TextLinkProps {
+  href: string;
+  className?: string;
+  target?: string;
+  children?: React.ReactNode;
+  id?: string;
+}
+
+/**
+ *
+ * @param {string} props.href contains a URL as href for a link
+ * @param {string} props.className contains additional classes that should be added to the component
+ * @param {string} props.target contains the target value for the link
+ * @param {React.ReactNode} props.children contains all the child elements bounded inside component
+ * @param {string} props.id contains an id to be appended on heading
+ */
+export default function TextLink({
+  href,
+  className = '',
+  target = '_blank',
+  children,
+  id
+}: TextLinkProps) {
+  // eslint-disable-next-line max-len
+  const classNames = twMerge(`text-secondary-500 underline hover:text-gray-800 font-medium transition ease-in-out duration-300 ${className || ''}`);
+
+  return (
+    <Link
+      href={href}
+      target={target}
+      rel='noreferrer noopener'
+      className={classNames}
+      id={id}
+      data-testid='TextLink-href'
+    >
+      <span className={classNames}>
+        {children}
+      </span>
+    </Link>
+  );
+}

types/typography/Heading.ts

@@ -0,0 +1,22 @@
+export enum HeadingLevel {
+    h1 = 'h1',
+    h2 = 'h2',
+    h3 = 'h3',
+    h4 = 'h4',
+    h5 = 'h5',
+    h6 = 'h6',
+}
+
+export enum HeadingTypeStyle {
+    xl = 'heading-xl',
+    lg = 'heading-lg',
+    md = 'heading-md',
+    mdSemibold = 'heading-md-semibold',
+    sm = 'heading-sm',
+    smSemibold = 'heading-sm-semibold',
+    xs = 'heading-xs',
+    xsSemibold = 'heading-xs-semibold',
+    bodyLg = 'body-lg',
+    bodyMd = 'body-md',
+    bodySm = 'body-sm',
+}

types/typography/Paragraph.ts

@@ -0,0 +1,5 @@
+export enum ParagraphTypeStyle {
+    lg = 'body-lg',
+    md = 'body-md',
+    sm = 'body-sm',
+}