From 3f1be2781dfa600f17cb454884a595942e55f356 Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Sun, 3 Aug 2025 00:28:42 -0300
Subject: [PATCH] feat(atom): add typography

---
 .../atoms/typography/typography.component.css |  9 +++
 .../typography/typography.component.html      | 65 +++++++++++++++++++
 .../typography/typography.component.spec.ts   | 29 +++++++++
 .../atoms/typography/typography.component.ts  | 51 +++++++++++++++
 .../src/lib/types/TypographyVariants.ts       |  8 +++
 5 files changed, 162 insertions(+)
 create mode 100644 projects/my-wallet-ds/src/lib/atoms/typography/typography.component.css
 create mode 100644 projects/my-wallet-ds/src/lib/atoms/typography/typography.component.html
 create mode 100644 projects/my-wallet-ds/src/lib/atoms/typography/typography.component.spec.ts
 create mode 100644 projects/my-wallet-ds/src/lib/atoms/typography/typography.component.ts
 create mode 100644 projects/my-wallet-ds/src/lib/types/TypographyVariants.ts

diff --git a/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.css b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.css
new file mode 100644
index 0000000..44e7b55
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.css
@@ -0,0 +1,9 @@
+p, h1, h2, h3, h4, h5 {
+    margin: 0 0;
+}
+
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.html b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.html
new file mode 100644
index 0000000..cb4e751
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.html
@@ -0,0 +1,65 @@
+@if(variant() === variantTypes.p) {
+    <p
+    [style.color]="color()" 
+    [style.fontSize]="size()"
+    [style.letterSpacing]="letterSpacing()" 
+    [style.lineHeight]="lineHeight() ? lineHeight() : size()"
+    [style.maxWidth]="maxWidth()"
+    [class.ellipsis]="ellipsis()"
+    ><ng-container *ngTemplateOutlet="content"></ng-container></p>
+} 
+@else if (variant() === variantTypes.h1) {
+    <h1
+    [style.color]="color()" 
+    [style.fontSize]="size()"
+    [style.letterSpacing]="letterSpacing()" 
+    [style.lineHeight]="lineHeight() ? lineHeight() : size()"
+    [style.maxWidth]="maxWidth()"
+    [class.ellipsis]="ellipsis()"
+    ><ng-container *ngTemplateOutlet="content"></ng-container></h1>
+}
+@else if (variant() === variantTypes.h2) {
+    <h2
+    [style.color]="color()" 
+    [style.fontSize]="size()"
+    [style.letterSpacing]="letterSpacing()" 
+    [style.lineHeight]="lineHeight() ? lineHeight() : size()"
+    [style.maxWidth]="maxWidth()"
+    [class.ellipsis]="ellipsis()"
+    ><ng-container *ngTemplateOutlet="content"></ng-container></h2>
+}
+@else if (variant() === variantTypes.h3) {
+    <h3
+    [style.color]="color()" 
+    [style.fontSize]="size()"
+    [style.letterSpacing]="letterSpacing()" 
+    [style.lineHeight]="lineHeight() ? lineHeight() : size()"
+    [style.maxWidth]="maxWidth()"
+    [class.ellipsis]="ellipsis()"
+    ><ng-container *ngTemplateOutlet="content"></ng-container></h3>
+}
+@else if (variant() === variantTypes.h4) {
+    <h4
+    [style.color]="color()" 
+    [style.fontSize]="size()"
+    [style.letterSpacing]="letterSpacing()" 
+    [style.lineHeight]="lineHeight() ? lineHeight() : size()"
+    [style.maxWidth]="maxWidth()"
+    [class.ellipsis]="ellipsis()"
+    ><ng-container *ngTemplateOutlet="content"></ng-container></h4>
+}
+@else if (variant() === variantTypes.h5) {
+    <h5
+    [style.color]="color()" 
+    [style.fontSize]="size()"
+    [style.letterSpacing]="letterSpacing()" 
+    [style.lineHeight]="lineHeight() ? lineHeight() : size()"
+    [style.maxWidth]="maxWidth()"
+    [class.ellipsis]="ellipsis()"
+    ><ng-container *ngTemplateOutlet="content"></ng-container></h5>
+}
+
+<ng-template #content>
+    <ng-content></ng-content>
+</ng-template>
+
diff --git a/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.spec.ts b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.spec.ts
new file mode 100644
index 0000000..bfeed60
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.spec.ts
@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TypographyComponent } from './typography.component';
+
+describe('TypographyComponent', () => {
+  let component: TypographyComponent;
+  let fixture: ComponentFixture<TypographyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TypographyComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TypographyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('updates lineHeight accordinly', () => {
+    const MOCK_LINEHEIGHT = '1.8rem';
+    fixture.componentRef.setInput('lineHeight', MOCK_LINEHEIGHT);
+    expect(component.lineHeight()).toBe(MOCK_LINEHEIGHT)
+  })
+});
diff --git a/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.ts b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.ts
new file mode 100644
index 0000000..ff441a6
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/atoms/typography/typography.component.ts
@@ -0,0 +1,51 @@
+import { Component, input } from '@angular/core';
+import { TypographyVariants } from '../../types/TypographyVariants';
+import { NgTemplateOutlet } from '@angular/common';
+
+@Component({
+  selector: 'my-wallet-typography',
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  templateUrl: './typography.component.html',
+  styleUrl: './typography.component.css'
+})
+export class TypographyComponent {
+  /**
+   * @description Color for text as a string
+   */
+  color = input("var(--mw-black, #000000)");
+
+  /**
+   * @description If true, turns overflowing text into ellipsis (...) when the maxWidth attr is set
+   */
+  ellipsis = input(false);
+  
+  /**
+   * @description sets the horizontal spacing behavior between text characters
+   */
+  letterSpacing = input("normal");
+  
+  /**
+   * @description Sets the height of a line box in horizontal writing modes
+   */
+  lineHeight = input(null, {transform:(v) => v === null ? this.size() : v})
+
+  /**
+   * @description Maximum width that the text might take (null if no max width)
+   */
+  maxWidth = input<string|null>(null)
+  
+  /**
+   * @description Font size with it's units
+   */
+  size = input("1.4rem");
+  
+  /**
+   * @description HTMLElement p,h1,h2,h3,h4,h5 
+   */
+  variant = input(TypographyVariants.p);
+  protected variantTypes = TypographyVariants;
+
+}
+
+
diff --git a/projects/my-wallet-ds/src/lib/types/TypographyVariants.ts b/projects/my-wallet-ds/src/lib/types/TypographyVariants.ts
new file mode 100644
index 0000000..2a3d793
--- /dev/null
+++ b/projects/my-wallet-ds/src/lib/types/TypographyVariants.ts
@@ -0,0 +1,8 @@
+export enum TypographyVariants {
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5"
+}
\ No newline at end of file