add simple badge component

js/packages/web/src/components/canary-badge.stories.ts

@@ -0,0 +1,24 @@
+import { html } from "lit";
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import "./canary-badge";
+
+enum Kind {
+  Default,
+}
+
+export default {
+  title: "Public/canary-badge",
+  parameters: { sourceLink: "components/canary-badge.stories.ts" },
+  render: ({ kind, name }) => {
+    if (kind === Kind.Default) {
+      return html` <canary-badge name=${name}></canary-badge> `;
+    }
+
+    throw new Error();
+  },
+} satisfies Meta<{ kind: Kind; name: string }>;
+
+export const Default: StoryObj = {
+  args: { kind: Kind.Default, name: "CLOSED" },
+};

js/packages/web/src/components/canary-badge.ts

@@ -0,0 +1,35 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const NAME = "canary-badge";
+
+@customElement(NAME)
+export class CanaryBadge extends LitElement {
+  @property({ type: String })
+  name!: string;
+
+  render() {
+    return html` <span class="container"> ${this.name} </span> `;
+  }
+
+  static styles = css`
+    .container {
+      padding: 0.25em 0.4em;
+      border-radius: 0.25em;
+      font-size: 0.75rem;
+      border: 1px solid var(--canary-color-primary-60);
+      color: var(--canary-color-primary-60);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [NAME]: CanaryBadge;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      [NAME]: any;
+    }
+  }
+}