Feat: basic navigation component

docs/pages/components/mf-navigation.md

@@ -0,0 +1,26 @@
+---
+meta:
+  title: Mf Navigation
+  description: simple navigation component for static websites
+layout: component
+---
+
+```html:preview
+<mf-navigation>
+  <a slot="logo" name="logo">
+    <img src="https://placehold.co/100x100" alt="logo" />
+  </a>
+</mf-navigation>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+[component-metadata:mf-navigation]

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

@@ -0,0 +1,63 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property } from 'lit/decorators.js';
+import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './mf-navigation.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/mf-navigation
+ * @status experimental
+ * @since 2.0
+ *
+ * @dependency sl-example
+ *
+ *
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class MfNavigation extends ShoelaceElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  private readonly localize = new LocalizeController(this);
+
+  /** An example attribute. */
+  @property() attr = 'example';
+
+  @watch('example')
+  handleExampleChange() {
+    // do something
+  }
+  private readonly hasSlotController = new HasSlotController(this, 'action');
+
+  render() {
+    const isRtl = this.localize.dir() === 'rtl';
+
+    return html`
+      <header
+        part="base"
+        class=${classMap({
+          navigation: true,
+          'navigation--has-action': this.hasSlotController.test('action'),
+          'navigation--is-Rtl': isRtl
+        })}
+      >
+        <div class="navigation__container">
+          <slot name="logo" part="logo" class="navigation__logo"></slot>
+          <slot name="menu" part="menu" class="navigation__menu"></slot>
+          <slot name="action" part="action" class="navigation__action"></slot>
+        </div>
+      </header>
+    `;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+  }
+  .navigation {
+    display: flex;
+    border-radius: 0;
+  }
+`;

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

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

src/components/mf-navigation/mf-navigation.ts

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

src/shoelace.ts

@@ -57,6 +57,7 @@ export { default as SlTooltip } from './components/tooltip/tooltip.js';
 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';
 /* plop:component */
 
 // Utilities