From b9d4235553803e020a41677707599f4314a2409f Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Thu, 15 Feb 2024 04:54:32 +0000
Subject: [PATCH] Introduce Label

---
 packages/thorin-core/src/index.ts       |  1 +
 packages/thorin-core/src/label/index.ts | 60 +++++++++++++++++++++++++
 packages/thorin-core/src/style.css      |  1 +
 packages/thorin-core/src/tag/index.ts   |  6 ---
 web/index.html                          |  5 +++
 5 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 packages/thorin-core/src/label/index.ts

diff --git a/packages/thorin-core/src/index.ts b/packages/thorin-core/src/index.ts
index 3ac02fa..ffed30c 100644
--- a/packages/thorin-core/src/index.ts
+++ b/packages/thorin-core/src/index.ts
@@ -1,5 +1,6 @@
 export { ThorinAvatar } from './avatar';
 export { ThorinButton } from './button';
+export { ThorinLabel } from './label';
 export { ThorinModal } from './modal';
 export { ThorinTag } from './tag';
 
diff --git a/packages/thorin-core/src/label/index.ts b/packages/thorin-core/src/label/index.ts
new file mode 100644
index 0000000..1735113
--- /dev/null
+++ b/packages/thorin-core/src/label/index.ts
@@ -0,0 +1,60 @@
+/* eslint-disable unicorn/template-indent */
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+type LabelVariant = 'default' | 'active' | 'helper';
+
+@customElement('thorin-label')
+export class ThorinLabel extends LitElement {
+    static styles = css`
+        .label.default {
+            --color: var(--thorin-text-secondary);
+            --border: 1px solid var(--thorin-border);
+        }
+        .label.active {
+            --bg: var(--thorin-blue-surface);
+            --color: var(--thorin-blue-primary);
+            --border: 1px solid var(--thorin-blue-surface);
+        }
+        .label.helper {
+            --color: var(--thorin-indigo-primary);
+            --border: 1px solid var(--thorin-border);
+            text-decoration: underline;
+        }
+        .label {
+            background: var(--bg);
+            color: var(--color);
+            display: inline-flex;
+            justify-content: center;
+            gap: 4px;
+            overflow: hidden;
+            appearance: none;
+            border: var(--border);
+            outline: none;
+            border-radius: var(--thorin-radius-label);
+            padding: 4px 8px;
+            font-weight: bold;
+        }
+    `;
+
+    @property({ type: String })
+    variant: LabelVariant = 'default';
+
+    render() {
+        return html`
+            <span class="${this.computeClass}">
+                <slot></slot>
+            </span>
+        `;
+    }
+
+    private get computeClass() {
+        return ['label', this.variant].join(' ').trim() || undefined;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'thorin-label': ThorinLabel;
+    }
+}
diff --git a/packages/thorin-core/src/style.css b/packages/thorin-core/src/style.css
index 01531fc..d78adc9 100644
--- a/packages/thorin-core/src/style.css
+++ b/packages/thorin-core/src/style.css
@@ -136,6 +136,7 @@ p {
     --thorin-radius-button: 8px;
     --thorin-radius-card: 16px;
     --thorin-radius-tag: 14px;
+    --thorin-radius-label: 4px;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/packages/thorin-core/src/tag/index.ts b/packages/thorin-core/src/tag/index.ts
index d819e36..523512d 100644
--- a/packages/thorin-core/src/tag/index.ts
+++ b/packages/thorin-core/src/tag/index.ts
@@ -66,12 +66,6 @@ export class ThorinTag extends LitElement {
     private get computeClass() {
         return ['tag', this.variant].join(' ').trim() || undefined;
     }
-
-    private _onClick(event: PointerEvent) {
-        if (this.onclick) {
-            this.onclick(event);
-        }
-    }
 }
 
 declare global {
diff --git a/web/index.html b/web/index.html
index 3fe5f37..909cbfa 100644
--- a/web/index.html
+++ b/web/index.html
@@ -44,6 +44,11 @@ <h1>thorin.design</h1>
                 <thorin-tag variant="yellow">Tag</thorin-tag>
                 <thorin-tag variant="grey">Tag</thorin-tag>
             </div>
+            <div class="card">
+                <thorin-label>Label</thorin-label>
+                <thorin-label variant="active">Label</thorin-label>
+                <thorin-label variant="helper">Label</thorin-label>
+            </div>
             <div class="card">
                 <thorin-button onclick="opentestmodal()">Open Modal</thorin-button>
             </div>