feat: maf-img component

docs/pages/components/mf-img.md

@@ -0,0 +1,26 @@
+---
+meta:
+  title: Mf Img
+  description:
+layout: component
+---
+
+```html:preview
+<mf-img src="https://www.dev.mallgiftcard.ae/assets/maf-logo-header.svg" alt="MAF" ></mf-img>
+```
+
+## Examples
+
+### Only image
+
+```html:preview
+<mf-img src="https://www.dev.mallgiftcard.ae/assets/maf-logo-header.svg" alt="MAF" ></mf-img>
+```
+
+### Image and Link
+
+```html:preview
+<mf-img src="https://www.dev.mallgiftcard.ae/assets/maf-logo-header.svg" alt="MAF" href="https://google.com"></mf-img>
+```
+
+[component-metadata:mf-logo]

src/components/mf-img/mf-img.component.ts

@@ -0,0 +1,64 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property } from 'lit/decorators.js';
+import componentStyles from '../../styles/component.styles.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './mf-img.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/mf-img
+ * @status experimental
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart image - The component's image part.
+ *
+ */
+export default class MfImg extends ShoelaceElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  private readonly localize = new LocalizeController(this);
+
+  /** Logo href value. */
+  @property() href = '';
+
+  /** Logo src value. */
+  @property() src = '';
+
+  /** Logo Alt value. */
+  @property() alt = '';
+
+  /** image width value. */
+  @property() width = '';
+
+  /** image height value. */
+  @property() height = '';
+
+  /** anchor target value. */
+  @property() target: '_blank' | '_parent' | '_self' | '_top' = '_self';
+
+  render() {
+    const isRtl = this.localize.dir() === 'rtl';
+    if (this.href) {
+      return html` <a
+        class=${classMap({
+          img: true,
+          'img--rtl': isRtl,
+          'img--anchor': this.href
+        })}
+        part="base"
+        href="${this.href}"
+        target="${this.target}"
+      >
+        <img src="${this.src}" alt="${this.alt}" width="${this.width}" height="${this.height}" part="image" />
+      </a>`;
+    } else {
+      return html`
+        <img src="${this.src}" alt="${this.alt}" width="${this.width}" height="${this.height}" part="image" />
+      `;
+    }
+  }
+}

src/components/mf-img/mf-img.styles.ts

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+  }
+  :host a {
+    display: block;
+    text-decoration: none;
+  }
+
+  :host img {
+    display: block;
+    text-decoration: none;
+  }
+
+  a img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;

src/components/mf-img/mf-img.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/shoelace.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<mf-img>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <mf-img></mf-img> `);
+
+    expect(el).to.exist;
+  });
+});

src/components/mf-img/mf-img.ts

@@ -0,0 +1,12 @@
+import MfImg from './mf-img.component.js';
+
+export * from './mf-img.component.js';
+export default MfImg;
+
+MfImg.define('mf-img');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'mf-img': MfImg;
+  }
+}

src/shoelace.ts

@@ -58,6 +58,8 @@ export { default as SlTree } from './components/tree/tree.js';
 export { default as SlTreeItem } from './components/tree-item/tree-item.js';
 export { default as SlVisuallyHidden } from './components/visually-hidden/visually-hidden.js';
 export { default as MfNavigation } from './components/mf-navigation/mf-navigation.js';
+export { default as MfNavItem } from './components/mf-nav-item/mf-nav-item.js';
+export { default as MFLogo } from './components/mf-img/mf-img.js';
 /* plop:component */
 
 // Utilities