@triptease/tt-navbar 0.0.2

package/src/TtNavbar.ts

@@ -0,0 +1,27 @@
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class TtNavbar extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      padding: 25px;
+      color: var(--tt-navbar-text-color, #000);
+    }
+  `;
+
+  @property({ type: String }) header = 'Hey there';
+
+  @property({ type: Number }) counter = 5;
+
+  __increment() {
+    this.counter += 1;
+  }
+
+  render() {
+    return html`
+      <h2>${this.header} Nr. ${this.counter}!</h2>
+      <button @click=${this.__increment}>increment</button>
+    `;
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { TtNavbar } from './TtNavbar.js';

package/src/tt-navbar.ts

@@ -0,0 +1,3 @@
+import { TtNavbar } from './TtNavbar.js';
+
+window.customElements.define('tt-navbar', TtNavbar);

package/stories/index.stories.ts

@@ -0,0 +1,60 @@
+import { html, TemplateResult } from 'lit';
+import '../src/tt-navbar.js';
+
+export default {
+  title: 'TtNavbar',
+  component: 'tt-navbar',
+  argTypes: {
+    header: { control: 'text' },
+    counter: { control: 'number' },
+    textColor: { control: 'color' },
+  },
+};
+
+interface Story<T> {
+  (args: T): TemplateResult;
+  args?: Partial<T>;
+  argTypes?: Record<string, unknown>;
+}
+
+interface ArgTypes {
+  header?: string;
+  counter?: number;
+  textColor?: string;
+  slot?: TemplateResult;
+}
+
+const Template: Story<ArgTypes> = ({
+  header = 'Hello world',
+  counter = 5,
+  textColor,
+  slot,
+}: ArgTypes) => html`
+  <tt-navbar
+    style="--tt-navbar-text-color: ${textColor || 'black'}"
+    .header=${header}
+    .counter=${counter}
+  >
+    ${slot}
+  </tt-navbar>
+`;
+
+export const Regular = Template.bind({});
+
+export const CustomHeader = Template.bind({});
+CustomHeader.args = {
+  header: 'My header',
+};
+
+export const CustomCounter = Template.bind({});
+CustomCounter.args = {
+  counter: 123456,
+};
+
+export const SlottedContent = Template.bind({});
+SlottedContent.args = {
+  slot: html`<p>Slotted content</p>`,
+};
+SlottedContent.argTypes = {
+  slot: { table: { disable: true } },
+};

package/test/tt-navbar.test.ts

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { TtNavbar } from '../src/TtNavbar.js';
+import '../src/tt-navbar.js';
+
+describe('TtNavbar', () => {
+  it('has a default header "Hey there" and counter 5', async () => {
+    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);
+
+    expect(el.header).to.equal('Hey there');
+    expect(el.counter).to.equal(5);
+  });
+
+  it('increases the counter on button click', async () => {
+    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);
+    el.shadowRoot!.querySelector('button')!.click();
+
+    expect(el.counter).to.equal(6);
+  });
+
+  it('can override the header via attribute', async () => {
+    const el = await fixture<TtNavbar>(html`<tt-navbar header="attribute header"></tt-navbar>`);
+
+    expect(el.header).to.equal('attribute header');
+  });
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture<TtNavbar>(html`<tt-navbar></tt-navbar>`);
+
+    await expect(el).shadowDom.to.be.accessible();
+  });
+});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noEmitOnError": true,
+    "lib": ["es2021", "dom", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.js

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.lit] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.js

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});