feat: img atom

projects/my-wallet-ds/src/lib/atoms/img/img.component.html

@@ -0,0 +1 @@
+<img [ngSrc]="src()" [width]="width()" [height]="height()" [alt]="alt()" [priority]="hasPriority()">

projects/my-wallet-ds/src/lib/atoms/img/img.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImgComponent } from './img.component';
+
+describe('ImgComponent', () => {
+  let component: ImgComponent;
+  let fixture: ComponentFixture<ImgComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ImgComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ImgComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/my-wallet-ds/src/lib/atoms/img/img.component.ts

@@ -0,0 +1,32 @@
+import { Component, input } from '@angular/core';
+import { NgOptimizedImage } from "@angular/common";
+
+@Component({
+  selector: 'mw-img',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  templateUrl: './img.component.html',
+  styles: ''
+})
+export class ImgComponent {
+  /**
+   * @description An alternative text description of the image.
+   */
+  alt = input('img');
+  /**
+   * @description Indicates whether this image should have a high priority.
+   */
+  hasPriority = input(false);
+  /**
+   * @description The intrinsic height of the image in pixels.
+   */
+  height = input(36);
+  /**
+   * @description The src path to the asset
+   */
+  src = input('/assets/icons/blank.png');
+  /**
+   * @description The intrinsic width of the image in pixels.
+   */
+  width = input(36);
+}

projects/my-wallet-ds/src/stories/atoms/img.stories.ts

@@ -0,0 +1,71 @@
+import type { Meta } from '@storybook/angular';
+import { ImgComponent } from '../../lib/atoms/img/img.component';
+import { pngIconsList } from '../png-icons-list';
+
+const meta: Meta<ImgComponent> = {
+    title: 'Atoms/Img',
+    component: ImgComponent,
+    tags: ['autodocs'],
+    args: {
+        alt: 'Alt text',
+        hasPriority: false,
+        height: 36,
+        src: '/assets/icons/blank.png',
+        width: 36  
+    },
+    argTypes: {
+        alt: {
+            description: 'An alternative text description of the image',
+            type: 'string',
+            table: {defaultValue: {detail: 'Defaults to \'img\'.', summary: 'img'}}
+        },
+        hasPriority: {
+            description: 'Indicates whether this image should have a high priority.',
+            table: {defaultValue: {detail: 'Defaults to false.', summary: 'false'}},
+            type: 'boolean',
+        },
+        height: {
+            description: 'The intrinsic height of the image in pixels',
+            table: {defaultValue: {detail: 'Defaults to 36px.', summary: '36',}},
+            type: 'number',
+        },
+        src: {
+            control: 'select',
+            description: 'The path to the png asset',
+            options: pngIconsList,
+            table: {defaultValue: {detail:'Defaults to transparent png', summary:'/assets/icons/blank.png'}},
+            type: 'string',
+        },
+        width: {
+            description: 'The intrinsic width of the image in pixels.',
+            table: {defaultValue: {detail: 'Defaults to 36px.', summary: '36',}},
+            type: 'number'
+        }
+
+    }
+};
+
+export default meta;
+
+const Template = (args: { alt: string, hasPriority: boolean, height: number, src: string, width: number}) => ({
+  props: args,
+  styles: `
+    :host {
+        display:flex; 
+        justify-content: center;
+        background-color:#000;
+        padding: 20px 0;
+    }
+  `,
+  template: `
+    <mw-img
+        [alt]='alt'
+        [hasPriority]='hasPriority'
+        [height]='height'
+        [src]='src'
+        [width]='width'
+    />
+  `
+});
+
+export const Img = Template.bind({});