feat: logo component

etchteam · Jan 24, 2024 · cc7898b · cc7898b
1 parent 14ba3b6
commit cc7898b
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/src/style.css" />
 		<title>Recycling Locator widget</title>

diff --git a/public/recycling-locator-logo.webp b/public/recycling-locator-logo.webp
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/app/Start.tsx b/src/app/Start.tsx
@@ -2,7 +2,7 @@ export default function StartPage() {
   return (
     <locator-layout>
       <header slot="header">
-        <locator-logo>Recycling Locator</locator-logo>
+        <locator-logo></locator-logo>
       </header>
       <div slot="main">
         <h2>Find places to recycle</h2>

diff --git a/src/components/Layout/Layout.stories.ts b/src/components/Layout/Layout.stories.ts
@@ -8,9 +8,8 @@ const meta: Meta = {
 };
 
 export default meta;
-type Story = StoryObj;
 
-export const Layout: Story = {
+export const Layout: StoryObj = {
   render: () => html`
     <locator-layout>
       <header slot="header">Header</header>

diff --git a/src/components/Logo/Logo.stories.ts b/src/components/Logo/Logo.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './Logo';
+
+const meta: Meta = {
+  component: 'locator-logo',
+};
+
+export default meta;
+
+export const Logo: StoryObj = {
+  render: () => html`<locator-logo></locator-logo>`,
+};
diff --git a/src/components/Logo/Logo.ts b/src/components/Logo/Logo.ts
@@ -0,0 +1,28 @@
+import { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('locator-logo')
+export class Logo extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    img {
+      display: block;
+      width: min(230px, 100%);
+      height: auto;
+    }
+  `;
+
+  render() {
+    return html`
+      <img
+        src="/recycling-locator-logo.webp"
+        alt="Recycling Locator"
+        width="230"
+        height="42"
+      />
+    `;
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,6 +3,9 @@ import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 3000,
+  },
   plugins: [
     preact({
       babel: {