feat(atom): add typography

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

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

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

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

projects/my-wallet-ds/src/lib/types/TypographyVariants.ts

@@ -0,0 +1,8 @@
+export enum TypographyVariants {
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5"
+}