Feat/mf header

README.md

@@ -9,7 +9,7 @@ A forward-thinking library of web components.
 - Built with accessibility in mind ♿️
 - Open source 😸
 
-Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+Designed in New Hampshire by [Cory LaViska](https://twitter.com/cory_laviska).
 
 ---
 
@@ -77,6 +77,6 @@ Shoelace is an open source project and contributions are encouraged! If you're i
 
 ## License
 
-Shoelace was created by [Cory LaViska](https://twitter.com/claviska) and is available under the terms of the MIT license.
+Shoelace was created by [Cory LaViska](https://twitter.com/cory_laviska) and is available under the terms of the MIT license.
 
 Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾

docs/_includes/component.njk

@@ -1,6 +1,7 @@
 {% extends "default.njk" %}
 
 {# Find the component based on the `tag` front matter #}
+{# the below line should be updated to not add the "SL-" in the header #}
 {% set component = getComponent('sl-' + page.fileSlug) %}
 
 {% block content %}

docs/pages/components/mf-action-item.md

@@ -0,0 +1,52 @@
+---
+meta:
+  title: Mf Action Item
+  description:
+layout: component
+---
+
+```html:preview
+<mf-actions>
+  <mf-action-item href="/">Option 1</mf-action-item>
+  <mf-action-item disabled>Disabled</mf-action-item>
+  <mf-action-item loading>Loading</mf-action-item>
+  <mf-action-item>
+    <sl-icon slot="icon" name="person"></sl-icon>
+  </mf-action-item>
+  <mf-action-item>
+    Suffix Icon
+    <sl-icon slot="suffix" name="heart"></sl-icon>
+  </mf-action-item>
+</mf-actions>
+```
+
+## Examples
+
+### Language Selector
+
+```html:preview
+  <mf-action-item>
+    <sl-icon slot="prefix" name="flag-fill"></sl-icon>
+    AR
+  </mf-action-item>
+```
+
+### Notification
+
+```html:preview
+  <mf-action-item style="width: 60px;">
+    <sl-icon slot="prefix" name="bag"></sl-icon>
+
+    <sl-badge slot="suffix" variant="primary" pill>
+        12
+      </sl-badge>
+  </mf-action-item>
+```
+
+### Notification
+
+```html:preview
+
+```
+
+[component-metadata:mf-action-item]

docs/pages/components/mf-actions.md

@@ -0,0 +1,98 @@
+---
+meta:
+  title: Mf Nav Actions
+  description:
+layout: component
+---
+
+```html:preview
+<mf-actions>
+  <mf-action-item href="/">Download Brochure</mf-action-item>
+  <mf-action-item >
+    <sl-icon slot="prefix" name="flag-fill"></sl-icon>
+    AR
+    <mf-actions slot="submenu">
+      <mf-action-item >
+        <sl-icon slot="prefix" name="flag-fill"></sl-icon>
+        AR
+      </mf-action-item>
+      <mf-action-item >
+        <sl-icon slot="prefix" name="flag-fill"></sl-icon>
+        EN
+      </mf-action-item>
+    </mf-actions>
+  </mf-action-item>
+  <mf-action-item>
+    <sl-icon slot="icon" name="person"></sl-icon>
+  </mf-action-item>
+</mf-actions>
+```
+
+## Examples
+
+### Simple Actions
+
+```html:preview
+<div style="width: 260px;">
+<mf-actions>
+  <mf-action-item href="/">Download Brochure</mf-action-item>
+  <mf-action-item>
+    AR
+  </mf-action-item>
+</mf-actions>
+</div>
+```
+
+### Second Example
+
+```html:preview
+<div style="width: 300px;">
+<mf-actions>
+  <mf-action-item >
+    <sl-icon slot="prefix" name="flag-fill"></sl-icon>
+    AR
+    <mf-actions slot="submenu" style="width: 200px;">
+      <mf-action-item >
+        <sl-icon slot="prefix" name="flag-fill"></sl-icon>
+        UAE
+      </mf-action-item>
+      <mf-action-item >
+        <sl-icon slot="prefix" name="flag-fill"></sl-icon>
+        KSA
+      </mf-action-item>
+      <sl-divider></sl-divider>
+      <mf-action-item >
+        AR
+      </mf-action-item>
+      <mf-action-item >
+        EN
+      </mf-action-item>
+    </mf-actions>
+  </mf-action-item>
+  <mf-action-item hideChevron="true">
+    <sl-icon slot="icon" name="person"></sl-icon>
+      <mf-actions slot="submenu" style="width: 450px;height: 500px;align-items: center;">
+        <mf-logo src="https://www.dev.mallgiftcard.ae/assets/maf-logo-header.svg" alt="MAF" ></mf-logo>
+        <p style="max-width: 400px;text-wrap: auto;">
+          LOG IN OR REGISTER NOW
+          <br />
+One account for all Majid Al Futtaim brands
+<br />
+Log in with your existing Majid Al Futtaim account or register now for a seamless experience and to redeem SHARE points.
+</p>
+        <sl-button variant="primary" >Login</sl-button>
+        <sl-button variant="neutral">Registration</sl-button>
+        <mf-logo src="https://api-prod.thatconceptstore.com/medias/maf-en.png?context=bWFzdGVyfGltYWdlc3w1OTcyfGltYWdlL3BuZ3xhR1EwTDJneE1pOHhNVFF3TlRVM05ERXhNVEkyTWk5dFlXWmZaVzR1Y0c1bnwyY2IzZmU0MmI1M2NkOTg3MmY1NjBhNTA5ODhlZjFkMTMxYjVmZmJiYmNjMjlhZmIxODI5MTU4YjQ1MzVkYjVj" alt="MAF" style="width: 100px;"></mf-logo>
+      </mf-actions>
+  </mf-action-item>
+  <mf-action-item>
+    <sl-icon slot="icon" name="heart"></sl-icon>
+  </mf-action-item>
+  <mf-action-item>
+    <sl-icon slot="icon" name="bag"></sl-icon>
+  </mf-action-item>
+</mf-actions>
+</div>
+```
+
+[component-metadata:mf-nav-actions]